带有getElementsByClassName的Javascript执行引擎

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的Javascript执行引擎

问题描述

2 个解决方案

解决方案1
1 2018-09-01 15:44:52

解决方案2
0 已采纳 2018-09-01 15:41:33

带有getElementsByClassName的Javascript执行引擎

问题描述

2 个解决方案

解决方案1 1 2018-09-01 15:44:52

解决方案2 0 已采纳 2018-09-01 15:41:33

解决方案1
1 2018-09-01 15:44:52

解决方案2
0 已采纳 2018-09-01 15:41:33