Toggle img src onclick


(Quint Rahaman) #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">';
}

(Quint Rahaman) #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";
}