Question

对于以下愚蠢的问题和代码源的缩进表示抱歉。我是编码的新手。有人可以帮我理解为什么我需要单击两次提交按钮才能看到第二个正确答案按照下面的代码变为绿色吗？更糟糕的是，当我在脚本中插入“警报”方法时，只有在单击警报窗口的“确定”后，第一个正确答案才会变为绿色。

非常感谢您

Ehoussoud

function check() {
  var cans = document.getElementsByClassName('correct');
  for (i = 0; i < cans.length; i++) {
    cans[i].className = "cool";
  }
}

form {
  font-size: 16px;
  font-family: Verdana;
}

.cool {
  color: lightgreen;
}

<body>

  <h1>Premier League 2017/18 Quiz</h1>

  <form>

    <p>Q1.Which of the three championship teams were promoted to the premier league?
    </p><br>

    <div class="correct"> <input type="radio" name="Q1" value="A">Wolves,Cardiff,Fulham </div>
    <input type="radio" name="Q1" value="B">Wolves,Middlesbrough,Aston Villa
    </br>


    <p>Q2.Which player made the most assists?<br></p>

    <input type="radio" name="Q2" value="A">David Silva</br>
    <div class="correct"><input type="radio" name="Q2" value="B">Kevin De Bruyne
    </div>
    </br>

    <input type="button" value="submit" onclick="check()">

  </form>

</body>

Answer 1

在处理具有相同id / class的多个元素时，使用jquery可以为您节省一些时间。您正在使用element.className = "class-name";，应该像这样使用element.classList.add("class-name");：

function check(){
    var cans=document.getElementsByClassName('correct');
    for(i=0;i<cans.length;i++){
        cans[i].classList.add("cool"); 
    }         
}

希望这会有所帮助！

Answer 2

问题在于，在第一次迭代中，您正在重命名类correct中的一个元素。因此，您在此类中有两个元素（情况如何），在第二个迭代cans[i]（i = 1）中将不存在，因为cans仅具有一个元素。因此，我访问了cans[0]，因为这一切都将存在。

function check() {
  var cans = document.getElementsByClassName('correct');
  var quantity = cans.length;
  for (i = 0; i < quantity; i++) {
    cans[0].className = "cool";
  }

}

form {
  font-size: 16px;
  font-family: Verdana;
}

.cool {
  color: lightgreen;
}

<body>

  <h1>Premier League 2017/18 Quiz</h1>

  <form>

    <p>Q1.Which of the three championship teams were promoted to the premier league?
    </p><br>

    <div class="correct"> <input type="radio" name="Q1" value="A">Wolves,Cardiff,Fulham </div>
    <input type="radio" name="Q1" value="B">Wolves,Middlesbrough,Aston Villa
    </br>


    <p>Q2.Which player made the most assists?<br></p>

    <input type="radio" name="Q2" value="A">David Silva</br>
    <div class="correct"><input type="radio" name="Q2" value="B">Kevin De Bruyne
    </div>
    </br>

    <input type="button" value="submit" onclick="check()">

  </form>

</body>

带有getElementsByClassName

2 个答案: