Javascript loop funtion(i)

Question

I'm a rookie. I try this example to test code that when click on each p ,the section text will replace by "yeah" When click first p, first section is replaced When click 2nd p, 2nd section is replaced ... Code like this

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
<style>p{text-align: center;}</style>
</head>
<body>
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
<script>
var x = document.getElementsByClassName("test")
var y = document.getElementsByTagName("section")
for(i=0;i<y.length;i++){
 y[i].setAttribute("class","linktest")
}
var z = document.getElementsByClassName("linktest")
function place(a){
 z[a-1].innerHTML="yeah"
}

for(i=0;i<x.length;i++){
 x[i].addEventListener("click", function(){
place(i+1)})
}

</script>


</body>
</html>

how i wrong with for loop code of addEventListener I try to write long code like this

x[0].addEventListener("click",function(){place(1)})
x[1].addEventListener("click",function(){place(2)})
x[2].addEventListener("click",function(){place(3)})
x[3].addEventListener("click",function(){place(4)})
x[4].addEventListener("click",function(){place(5)})
x[5].addEventListener("click",function(){place(6)})

And it worked but i want to short code because real work has mor than 100 items Help plz

Does this answer your question? [addEventListener using for loop and passing values](https://stackoverflow.com/questions/19586137/addeventlistener-using-for-loop-and-passing-values) — Shan Eapen Koshy, Apr 21 '20 at 05:05

score 1 · Answer 1 · answered Apr 21 '20 at 05:21

@Chaska's answer works fine but since you mentioned that there will be over 100 items it's important to avoid adding event listeners for each element for better performance. Instead wrap all the p tags in a div and add a single event listener to the div tag. Here is a slightly modified code.

var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
  //assuming equal no. of elements in x and y
  y[i].setAttribute("class", "linktest");
  x[i].setAttribute('data-index', i);
}
var z = document.getElementsByClassName("linktest");

function place(a) {
  z[a].innerHTML = "yeah";
}

var testGroup = document.getElementById('test-group');
testGroup.addEventListener('click', function() {
  place(parseInt(event.target.getAttribute('data-index')));
})

<div id="test-group">
  <p class="test">hello</p>
  <p class="test">how</p>
  <p class="test">are</p>
  <p class="test">you</p>
  <p class="test">today</p>
  <p class="test">sir</p>
</div>


<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>

score 0 · Answer 2 · answered Apr 21 '20 at 04:42

You are calling place() function out of the for loop. So the value of i will always be 6.

Try this way to assign the index to each element first and pass it to the place() function.

var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
  y[i].setAttribute("class", "linktest");
}
var z = document.getElementsByClassName("linktest");

function place(a) {
  z[a].innerHTML = "yeah";
}

for (i = 0; i < x.length; i++) {
  x[i].setAttribute('data-index', i);
  x[i].addEventListener("click", function() {
    place(parseInt(this.getAttribute('data-index')));
  })
}

<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>

Javascript loop funtion(i)

2 Answers2