I'm trying to create a for loop to shorten my code however when I test the code and try and make all the individual squares disappear when clicked, only the last one is disappearing and the others remain. I am quite stuck as the console is not giving me any errors either!
Please see my original long code targeting each individual square:
document.getElementById("square1").onclick = function disappear() {
document.getElementById("square1").style.visibility = "hidden";
}
document.getElementById("square2").onclick = function disappear() {
document.getElementById("square2").style.visibility = "hidden";
}
document.getElementById("square3").onclick = function disappear() {
document.getElementById("square3").style.visibility = "hidden";
}
document.getElementById("square4").onclick = function disappear() {
document.getElementById("square4").style.visibility = "hidden";
}
document.getElementById("square5").onclick = function disappear() {
document.getElementById("square5").style.visibility = "hidden";
}
document.getElementById("square6").onclick = function disappear() {
document.getElementById("square6").style.visibility = "hidden";
}
And this is the for loop I created to try and shorten my code:
for (var i = 1; i < 7; i++) {
var squaresDis = document.getElementById("square" + i);
document.addEventListener("click", function disappear() {
squaresDis.style.visibility = "hidden";
}
)};
