I have HTML elements iterated using a javascript loop
The html looks like this
<div class="description">Item 1</div>
<div class="description">Item 2</div>
<div class="description">Item 2</div>
The Javascript
let allItems = document.querySelectorAll(".description")
for (let i = 0; i <= allItems.length; i++) {
allItems[i].addEventListener("click", toggleSpinner.bind(this));
}
toggleSpinner = () => {
alert("I clicked") // here should be, for example, "I clicked Item 1,
// Or Item 2 or Item 3 depending on which was clicked
},
How do I call the function independently when each of the element is clicked
You could use something like this maybe?
toggleSpinner = (data) => {
console.log(`You clicked item ${data}`) // here should be, for example, "I clicked Item 1,
// Or Item 2 or Item 3 depending on which was clicked
}
let allItems = document.querySelectorAll(".description")
for (let i = 0; i < allItems.length; i++) {
allItems[i].addEventListener("click", toggleSpinner.bind(this, allItems[i].dataset.item));
}<div class="description" data-item="1">Item 1</div>
<div class="description" data-item="2">Item 2</div>
<div class="description" data-item="3">Item 3</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments