带有getElementsByClassName的Javascript执行引擎
[英]Javascript execution engine with getElementsByClassName
问题描述
Sorry for the stupid question and the indentation of the code source below. 
很抱歉出现以下愚蠢的问题和代码源缩进。 I am completely new to coding. 我是编码的新手。 Could someone help me understand why I need to click on the submit button twice to see the second correct answer turn green as per the code below? 有人可以帮我理解为什么我需要单击两次提交按钮才能看到第二个正确答案按照下面的代码变为绿色吗？ Worse, when I insert an 'alert' method into the script, the first correct answer turns green only after I click on the 'OK' of the alert window. 更糟糕的是，当我在脚本中插入“警报”方法时，只有在单击警报窗口的“确定”后，第一个正确答案才会变为绿色。
Thank you very much 非常感谢你
Ehoussoud 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>
2 个解决方案
解决方案1
1 2018-09-01 15:44:52
Using jquery could save you some time when you are working with multiple elements with the same id/class. 当使用多个具有相同id / class的元素时，使用jquery可以为您节省一些时间。 You were using element.className = "class-name"; 您正在使用element.className = "class-name"; You should use element.classList.add("class-name"); 您应该使用element.classList.add("class-name"); like so: 像这样：
function check(){
var cans=document.getElementsByClassName('correct');
for(i=0;i<cans.length;i++){
cans[i].classList.add("cool");
}
}
Hope this helps! 希望这可以帮助！
解决方案2
0 已采纳 2018-09-01 15:41:33
The problem is that in the first iteration you are renaming one the elements with class correct . 问题在于，在第一次迭代中，您正在重命名一个具有correct类的元素。 So, it you had two elements with this class (How is the case) in the second iteration cans[i] (i = 1) will not exists because cans just have one element. 因此，在第二次迭代中您有两个此类的元素（情况如何）， cans[i] （i = 1）将不存在，因为cans只有一个元素。 So for that i access cans[0] because it's all going to exists. 为此，我访问了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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.