So, I want to show some details when I click the details button. I have used for loop to loop through the buttons but it makes it so that when I click a single button, rest of the buttons get clicked as well. I understand it happens because of the for loop. But how do I make all the buttons clickable using a loop but prevent all of them from getting clicked when I click one? I'm super new to JavaScript.
function showDetails() {
for (let i = 0; i < allProducts.length; i++) {
const getHiddenDescription = document.getElementsByClassName("details");
getHiddenDescription[i].style = "display: block";
console.log("clicked");
}
}
const getDetails = document.querySelectorAll(".btn-details");
for (let i = 0; i < allProducts.length; i++) {
getDetails[i].addEventListener("click", showDetails);
}
You can select the button which triggered the event listener by using an optional parameter available in the event listener callback, often named event, like so.
function showDetails(event) {
clickedButton = event.currentTarget;
clickedbutton.style = "display: block";
}