Embarking on my JavaScript journey, so please bear with me as I'm just getting started :) I am working on a small app where the images on the left side are stored in an array. When a user clicks on one of them, I want to change its height and also toggle a boolean value from false to true to keep track of the selection for future use. My approach involves creating an array, adding an event listener to each item that triggers a function to update the value to true, and then executing another function to adjust the height accordingly. However, something seems off. Any advice would be greatly appreciated.
var storage = new Array();
storage[0] = document.getElementById("grandFatherCh");
storage[1] = document.getElementById("grandMotherCh");
storage[2] = document.getElementById("sisterCh");
storage[3] = document.getElementById("brotherCh");
storage[4] = document.getElementById("fatherCh");
storage[5] = document.getElementById("motherCh");
storage[0].clicked = false;
storage[1].clicked = false;
storage[2].clicked = false;
storage[3].clicked = false;
storage[4].clicked = false;
storage[5].clicked = false;
for (var i=0; i<storage.length; i++){
storage[i].addEventListener("click",choosen, setClick);
console.log("clicked");
};
function choosen(){
if (storage[i].clicked == false)
{
return "stillFalse"
storage[i].clicked = true;
}
};
function setClick(){
if(storage[i].clicked === true){
return "setClickWorks"
storage[i].style.height = "400px";
}else{
console.log('failed');
}
};