变量"i"不在javascript for循环中显示

Question

我正在尝试为循环练习做一些操作,并使用click事件将蓝色样式应用于所有"listing"类.除此之外,我还想在每个循环中打印"i"的值.任何人都可以指出代码中缺少的东西.谢谢,这是我的代码:

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>

Answer 1

您已经使用过document.write()函数它可能会覆盖文档HTML内容您可以使用console.log()调试变量的方法.还要在一个变量中使用元素引用,这样可以更快地执行.更改class="value"到id="value",因为它只有一个元素,从而标识为好,而不是课.类引用多个元素,但id仅引用一个元素.

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>