hypeDocument.setElementProperty, DOES NOT WORK?

1

Hi! Nice to see you again!
I'm having a weird behavior with: hypeDocument.setElementProperty(image,'opacity',0.0,1.0);

I've got these two functions:
buttonA():

sceneElement = document.getElementById(hypeDocument.currentSceneId());

var display = ".circle";

image = sceneElement.querySelector(display);

hypeDocument.setElementProperty(image,'opacity',0.0,1.0);
		
setTimeout(function(){

	sceneElement.querySelector(display).style.display = "none";
	
}, 1200);

and...

button B():

sceneElement = document.getElementById(hypeDocument.currentSceneId());

var display = ".circle";
		
sceneElement.querySelector(display).style.opacity = "1.0";

sceneElement.querySelector(display).style.display = "block";

...
The weird behaviour is that, when I do the routine buttonA() and buttonB() everything is ok but, when I try again, hypeDocument.setElementProperty(image,'opacity',0.0,1.0) DOES NOT WORK!!!
It is really very weird, do you know what is happening ?
Thanks!

Captura de pantalla 2023-02-01 a las 11.26.59

Untitled.zip (96.5 KB)

2

Have a look at this.

1 Like
3

so, do you have an idea about how to do something like this without troubles?
Thanks!

4

just do not mix Hypes methods with standard js on properties of elements. Relying on Hypes functionality in a Hypedocument should always be the first approach if possible. it'll be the most reliable. could also be done with timelines .... or?

2 Likes
5

Can I ask why are you trying to do it two different ways in the first place ?

1 Like
6

My suggestion:

Button A:

	sceneElement = document.getElementById(hypeDocument.currentSceneId());
	
	var displayElm = sceneElement.querySelector ('.circle');

		hypeDocument.setElementProperty(displayElm,'opacity',0,1.0);
			
			setTimeout(function(){
			
				displayElm.style.display = "none";
				
			}, 1200);

Button B:

	sceneElement = document.getElementById(hypeDocument.currentSceneId());
	
		var displayElm = sceneElement.querySelector ('.circle');
			
			displayElm.style.display = "block";
			
			hypeDocument.setElementProperty(displayElm,'opacity',1,1.0);

displayOnOff.zip (20.8 KB)

1 Like