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 class="goalBoxes" class="gridBoxes" id="goalOne">
<img
id="imageBoxOne"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</span>
<span class="goalBoxes" class="gridBoxes" id="goalTwo">
<img
id="imageBoxTwo"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</span>
<span class="goalBoxes" class="gridBoxes" id="goalThree">
<img
id="imageBoxThree"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</span>
<span class="goalBoxes" class="gridBoxes" id="goalFour">
<img
id="imageBoxFour"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</span>
<span class="goalBoxes" class="gridBoxes" id="goalFive">
<img
id="imageBoxFive"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</span>
<span class="goalBoxes" class="gridBoxes" id="goalSix">
<img
id="imageBoxSix"
src="images/flameV2.png"
alt="flaming checkmark"
class="flamingCheckmark"
/>
</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);
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)
})
})