Is there a way I can call a function for each html element when iterated using javascript loops

user_12106416 0
Viewed 212

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

getelementbyid ecmascript-6 html loops javascript
4 Answers

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>

user_92012770

let allItems = document.querySelectorAll(".description") for (let i = 0; i <= allItems.length; i++) { allItems[i].addEventListener("click", () => {toggleSpinner(allItems[i].innerHTML)}); }

toggleSpinner = content => { alert(I clicked ${content}) },

Something like that. Add a parameter to the function and define what you want to add as this content in the loop

Admin1

Are you looking something like this? 

$(document).ready(function(){

  $('div > *').click(function(){
    alert('hi');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <p> This is a paragraph </p>
  <section> This is a section </section>
  <span> This is a span </span>
  <article> This is an article </article>

</div>

user_26859140 

document.getElementById("getClickedElement").addEventListener("click", function(event) {
  console.log("Clicked element is:- ", event.target.innerHTML);
});
<div id="getClickedElement">
  <div class="description">Item 1</div>
  <div class="description">Item 2</div>
  <div class="description">Item 3</div>
</div>

Note:- Simply You have to wrap all the elements inside the parent div & bind addEventListener with that element. you will get targeted element data.

user_57343870
Related