变量“i”不显示在JavaScript for循环 [英] Variable "i" not displaying in javascript for loop

问题描述

我正在尝试做一些循环练习，并通过单击事件将蓝色样式应用于所有列表类。除此之外，我还想在每个循环中打印我的值。任何人都可以指出在代码中缺少什么。谢谢你
这是我的代码：

class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

function changeClass（） {for（i = 0; i <3; i ++）{var list = document.getElementsByClassName（listing）[i]; list.style.color =blue; var values = document.getElementsByClassName（value）;文件撰写（ⅰ）; }} document.getElementById（change）。addEventListener（click，changeClass）;

< ul id =groupList>< < li class =listing> First< / li>< li class =listing>第一< / li>< li class =listing> >< / li>< / ul>< button id =change>更改列表< /按钮>




解决方案您已经使用了 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（ⅰ）; } document.getElementById（value）。innerHTML = all_index.join（，）; } document.getElementById（change）。addEventListener（click，changeClass）;

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>

解决方案

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>

这篇关于变量“i”不显示在JavaScript for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！