Multiple toggling switches not working with IOS

Using JavaScript with Hype
1

I expect this is a very simple question but I am only an occasional user of Hype with some basic understanding of HTML and almost no knowledge of Javascript.

I am trying to create a web page with a grid of squares which allows users to change the colour of individual squares (toggling between black and white fill) by clicking on them.

I copied some simple code from a previous Hype Forum discussion (in 2016) to apply a Javascript action to each square which achieves this. It works fine when previewed on my Mac but not using Hype reflect on my iPhone and iPad.

What am I doing wrong?

2

you do not provide an example of what you're doing :slight_smile:

3

I thought maybe it was a generic error since the same issue occurred with different examples of code copied from the earlier Forum thread, but here is one I’m using as a Javascript function applied to ‘On Mouse Click (Tap)’:

hypeDocument.setElementProperty(element, 'opacity', 1);

element.addEventListener('click', function() {   
this.style.opacity = (this.style.opacity == 1) ? 0 : 1;            
});
4

you could use hypes builtin behaviours -> ‘touchstart’ on each element

then

var toggle = hypeDocument.getElementProperty(element, 'opacity');//will be 0 or 1 (equals false or true)
if(toggle){//if true
hypeDocument.setElementProperty(element, 'opacity', 0);
}else{//if false
hypeDocument.setElementProperty(element, 'opacity', 1);
}
1 Like
5

This seems to be working perfectly. Thank you very much for your help.