CODEWITHSUNDEEP
javascripthtml
Saksit Sirisakda
Saksit Sirisakda

Reputation: 1

Javascript loop funtion(i)

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

Upvotes: 0

Views: 63

Answers (2)

Shan Eapen Koshy
Shan Eapen Koshy

Reputation: 3005

@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>

Upvotes: 1

Chaska
Chaska

Reputation: 3205

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>

Upvotes: 0

Related Questions