Event Listener gets executed twice

Hi everyone,

I am facing a really weird problem which somehow just occurs sometimes:
I am trying to implement something similar to a list where you can select one or more elements.
My attempt is with event listeners for every element. When clicked a frame should show to give feedback that the element is clicked. This is simply done with opacity. Further I’d like safe the information that this element is clicked so I can use it later. But that’s not for now.

This is my code in a function which is called on scene load.

        var g2 = hypeDocument.getElementById("graph_2");
    	
        g2.addEventListener("click", function() { 
        	
        	var opac2 = g2.style.opacity;
        	alert(opac2);
        	
        	if (opac2 != 1) {
        		hypeDocument.setElementProperty(g2, 'opacity', 1, 0, 'easeinout');
        		alert("in if");
        	} else {
        		hypeDocument.setElementProperty(g2, 'opacity', 0, 0, 'easeinout');
        		alert("in else");
        	}
        	alert("after if else");
        	return;    	
        	
        });

The procedure is: ‘0’ > ‘in if’ > ‘after if else’ > ‘1’ > ‘in else’ > 'after if else’
Hence nothing changed and it’s the same as before.

I am happy for every suggestion because I am really stuck here. Maybe there’s a completely different way to accomplish what I want to do!
Thanks in advance :slight_smile:

Your listener is not firing twice at least not in my tests.

What you problem will be though is if you do not set a Opacity in the Hype property editor for the element. Then the standard Javascript to get the Opacity will not work.

Use hypeDocument.getElementProperty(g2, 'opacity'); at least until you have mutated the property.

I could see this firing twice if your scene is loaded twice. Elements stay around even when a scene is not shown, and just reset properties hype knows about on scene load. So if On Scene Load is being called twice, that means addEventListener will add the event twice. You may want to check to see if it is added or just set via the .onclick = method.

2 Likes

Good point... :smiley:

Thanks for your answers!

I already checked those points though.
The opacity property is set with a keyframe so it won’t be undefined.
And as far as I know the scene is just loaded once. Do you have an idea how it could secretly be loaded twice? I thought of this as well but couldn’t figure it out.

Anyways I avoided the problem now with using the on click action. However I’d still like to know why it’s not working the other way round.

Would you think that it would help removing all listeners on scene unload?

Maybe upload your project so we can see if we can spot anything…

1 Like

This would never be called if your scene is only loaded once, so it would not help.

As @MarkHunte says it'd be great if you could send a zip of your .hype document, otherwise it is only speculation.

Wow, thanks for offering that!

Unfortunately I can’t upload it due to it containing confidential information. :confused:

But thank you anyways for your help! :slight_smile:

In that case my basic flow would be to make a debugger; call near the addEventListener and in the javascript debugger see if that is being stopped there twice. If so, you may be able to look at the back traces and figure out why.

You could also create and post a dummy example without any confidential info or elements and is exhibiting the same behaviour.