CODEWITHSUNDEEP
javascripthtmlloopsfor-loop
jerz
jerz

Reputation: 65

Variable "i" not displaying in javascript for loop

I am trying to do some for loop practice and apply the blue color style to all "listing" class with a click event. In addition to that, i also wanted to print the value of "i" in every loop. Can anyone point out what im missing in the code please. Thank you Here is my code:

function changeClass(){
  
   for (i=0;i<3;i++) {
      var list =  document.getElementsByClassName("listing")[i];
      list.style.color = "blue";
      var values = document.getElementsByClassName("value");
      document.write(i);
   }
}

document.getElementById("change").addEventListener("click", changeClass);   
<ul id="groupList">
<li class="listing">First</li>
<li class="listing">First</li>
<li class="listing">First</li>
<li class="value"></li>
</ul>
<button id="change">change listing</button>

Upvotes: 0

Views: 125

Answers (2)

AL-zami
AL-zami

Reputation: 9066

you need to add a listener to invoke chageClass function

document.getElementById("change").addEventListener('click',changeClass,true);

Here i am going to indicate the reason of the problem in for loop :

inside your for loop when i==0;

document.write(i) will elimenate all the elements in your document and will print 0 in you document if everything is ok.

when i==1 in for loop :

the following line will become invalid because there will be no element holding the class "listing" .All other elements are eliminated from document .Now it will eliminate "0" form document and print "1" in document.and it will go on and on as long as the for loop goes on .

var list =  document.getElementsByClassName("listing")[i];

use document.body.innerHTML instead if you want to print in document:

   function changeClass(){

   for (i=0;i<3;i++) {
      var list =  document.getElementsByClassName("listing")[i];

      list.style.color = "blue";
      var values = document.getElementsByClassName("value");
     document.body.innerHTML+='<br>'+i+'<br>';
   }

}
  document.getElementById('change').addEventListener('click',changeClass,true);

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

You have used document.write() function it may be override document HTML content you can use console.log() method for debugging variable. Also take element reference in one variable so it will make some faster execution. Change class="value" to id="value" because it only one element so identifier is good instead of class. Class refer to multiple element but id refer to only one element.

function changeClass(){
   var dom=document.getElementsByClassName("listing");
   var all_index=[]
   for (i=0;i<dom.length;i++) {
      var list =  dom[i];
      list.style.color = "blue";
      all_index.push(i);
      
   }
   document.getElementById("value").innerHTML=all_index.join(",");
      
}

document.getElementById("change").addEventListener("click", changeClass);
<ul id="groupList">
<li class="listing">First</li>
<li class="listing">First</li>
<li class="listing">First</li>
<li id="value"></li>
</ul>
<button id="change">change listing</button>

Upvotes: 5

Related Questions