How can I loop through and make these images disappear onclick?-CodePudding

I have a grid of images in divs. I want it to work like a checkbox where you press the image and it disappears press it again and it appears. I have some code that works but I can't figure out how to loop through all the images.

     <aside id="goalBox">
        <span   id="goalOne">
          <img
            id="imageBoxOne"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
        <span   id="goalTwo">
          <img
            id="imageBoxTwo"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
        <span   id="goalThree">
          <img
            id="imageBoxThree"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
        <span   id="goalFour">
          <img
            id="imageBoxFour"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
        <span   id="goalFive">
          <img
            id="imageBoxFive"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
        <span   id="goalSix">
          <img
            id="imageBoxSix"
            src="images/flameV2.png"
            alt="flaming checkmark"
            
          />
        </span>
      </aside>

I made this code and got it to work for one

function testFunc() {
  let image = document.getElementById("imageBoxOne").style.visibility
  console.log(image)
  if (image == "hidden")
  {
    document.getElementById("imageBoxOne").style.visibility = "visible"
  } else  {
    document.getElementById("imageBoxOne").style.visibility = "hidden";
  }
  console.log('success')
}

document.querySelector('#goalOne').addEventListener('click', testFunc);

CodePudding user response：

To get all your .goalBoxes nodes, you can use querySelectorAll. It will return an Array-like object with all matching nodes. You can then iterate over them using forEach:

const goalBoxes = document.querySelectorAll(".goalBoxes");
goalBoxes.forEach(node => {
   node.addEventListener('click', () => testFunc(node));
});

This way, every .goalBox node will call testFunc when clicked.

The problem with that is testFunc being hardcoded for a specific element. One way you could change that is by changing testFunc to work for any element passed:

function testFunc(goalBox) {
  let image = goalBox.children[0].style.visibility
  console.log(image)
  if (image == "hidden")
  {
    goalBox.children[0].style.visibility = "visible"
  } else  {
    goalBox.children[0].style.visibility = "hidden";
  }
  console.log('success')
}

This way, instead of being hardcoded for a specific element, the function applies to the first child (the img) of the goalBox node passed to the function.

An alternative, better way of doing things would be using anonymous functions and css classes.

If you were to simply define the css class

.hidden {
   visibility: hidden;
}

you could reduce the javascript to

document.querySelectorAll(".goalBoxes").forEach(node => { // get all goalBoxes and iterate over them
   node.addEventListener('click', () => { // apply click event listener to each goalBox node
      node.children[0].classList.toggle("hidden") // when clicked, toggle the "hidden" class of the first child (the img)
   })
})

CodePudding user response：

 const images = document.querySelectorAll('img')
 
for (let i = 0; i < images.length; i  ) {
    const image = images[i]
    if (image.style.visibility == "hidden"){
        image.style.visibility = "visible"
    } else  {
        image.style.visibility = "hidden";
    }
    console.log('success')
    image.parentElement.addEventListener('click', testFunc);
}