Variable "i" not displaying in javascript for loop

Question

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>

What are you planning to do with values, the list of elements with the class value? — user663031
– user663031, Commented Sep 20, 2016 at 5:16

Haresh Vidja · Accepted Answer · 2016-09-20 05:26:36Z

5

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>

edited Sep 20, 2016 at 5:26

answered Sep 20, 2016 at 5:14

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user663031 Over a year ago

Please follow standard international English in your posts. Sentences are ended with a period (full stop). The first word in sentences is capitalized.

user663031 Over a year ago

What do you think the var values line is doing, and why did you leave it in your solution?

user663031 Over a year ago

Calm down. You got 28 points for a post which is both poorly written, and also did not make the obvious inference that the OP wanted to write out i into the value element and show him how to do that.

Haresh Vidja Over a year ago

@torazaburo, check snippet of OP, might be OP need it... I know it useless in our perspective but OP might be use else where.

jerz Over a year ago

thank you. how do you display them numbers in the page?

|

AL-zami · Accepted Answer · 2016-09-20 05:40:10Z

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);

Collectives™ on Stack Overflow

Variable "i" not displaying in javascript for loop

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related