Toggle img src onclick

Using JavaScript with Hype Function Library
1

In my scene, I have an image element with an id of “LengthSwitch”. The following js is what I thought would work to switch out the image with each onclick event. It partially works. The LengthOff.svg image is switched upon the first click to the LengthOn.svg image but it appears the function will not fire again when clicking on the element. Any direction would be appreciated…

if(hypeDocument.getElementById("LengthSwitch").innerHTML = '<img src = "${resourcesFolderName}/LengthOff.svg">') {
  hypeDocument.getElementById("LengthSwitch").innerHTML = '<img src = "${resourcesFolderName}/LengthOn.svg">';
}

else {
  hypeDocument.getElementById("LengthSwitch").innerHTML = '<img src = "${resourcesFolderName}/LengthOff.svg">';
}
2

Here’s what works:

if ((typeof this.lengthSwitch === "undefined") || (this.lengthSwitch === "Off")) {
  hypeDocument.getElementById("LengthSwitch").innerHTML = '<img src = "${resourcesFolderName}/LengthOn.svg">';
  this.lengthSwitch = "On";
}

else {
  hypeDocument.getElementById("LengthSwitch").innerHTML = '<img src = "${resourcesFolderName}/LengthOff.svg">';
  this.lengthSwitch = "Off";
}
3 Likes