Change elements in differents scenes using javascript

1

Hi everyone, sorry for my mistakes in english.

Is it possible to change the color of an element which takes place in a scene (exemple : scene 1), clicking on a button which takes place in an other scene (scene 2) ? How to link the two elements if they are not in the same scenes ?

I write that in javascript but it works only when elements takes place in the same scene

	function changecolor(hypeDocument, element, event) {

hypeDocument.getElementById('element1').style.backgroundColor = '#A2A6F2';

hypeDocument.getElementById('buttonchangecolor').onclick = changecolor;
}

Thanks for your help !

Clémence

2

There are certainly several approaches here. One option would be to use a persistent symbol: Give the rectangle a class name (e.g. 'box'). Turn the rectangle into a persistent symbol. You can now change the color of the rectangle within any persistent symbol in any scene using the class:

document.querySelector ('.box').style.backgroundColor = 'red';

Hope, this helps. Regards, Kalle

changeColorAcrossScenes.zip (25.4 KB)

2 Likes
3

Thanks for your answer.
I use the custom behavior to link the 2 buttons located in 2 different scenes.
In the scene 1, I define a custom behavior "changecolor"
and when you clic on the button in the scene 2, it makes the custom behaviour happened.
I made that for 4 buttons located in the scene 1

// Récupérer le bouton par son identifiant
var monBouton = document.getElementById("buttondef");

// Désactiver le bouton
monBouton.disabled = true;

// Modifier le style pour le rendre visuellement indisponible
monBouton.style.opacity = 0.5; // Exemple : réduire l'opacité du bouton
monBouton.style.border = "1px solid rgba(0, 0, 0, 0.5)"; // Réduire l'opacité du contour

4

Can you provide your Hype file?

5

changecolor.zip (38,1 Ko)
Here is the solution I find with the custome behaviour, it works.

6

should work ... or?

7

Yeah it works ! :slightly_smiling_face:

8

Maybe a simpler way,

Is to add a css style block in the head or in an elements inner HTML (as in this example)

<style>
.visited{
opacity :0.5!important; 
border :"1px solid rgba(0, 0, 0, 0.5)"!important;  
}


</style>

Add a javascript Action after the jump to scene for each of buttons.

The Javascript function will simply be;

element.classList.add('visited')

That's it. Each button calls the same single function.

Now when a button is clicked, it will switch scene and the add the class 'visited' to the button that called the function.

changecolor_MHv1.hype.zip (50.1 KB)

2 Likes