<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" placeholder="Student One" class ="student">
<input type="text" placeholder="Student Two" class ="student">
<input type="text" placeholder="Student Three" class ="student">
<br>
<label style="font-size: 30px;">Student One</label><br>
<label style="font-size: 30px;">Student Two</label><br>
<label style="font-size: 30px;">Student Three</label><br>
<button>Check</button>
<script type="text/javascript">
var students = document.querySelectorAll(".student");
var label = document.querySelectorAll("label");
var button = document.querySelector("button");
button.addEventListener("click",function(){
for(var i = 0; i < students.length; i++){
for(var j = 0; j < label.length; j++){
if (students[i].value >= 70 && students[i].value <= 100){
label[j].style.backgroundColor = "green";
}else if (students[i].value >= 50 && students[i].value < 70){
label[j].style.backgroundColor = "blue";
}else if (students[i].value >= 35 && students[i].value < 50){
label[j].style.backgroundColor = "yellow";
}else{
label[j].style.backgroundColor = "red";
}
}
}
});
</script>
</body>
</html>
有一个包含三个输入框的 HTML，用于输入三个学生的分数。
有三个标签有文本，一个按钮也是运行javascript代码
现在选择元素可以正常工作
在java脚本中，我使用了两个For 循环 首先是为学生循环[i] 二是标签循环[J]
当我尝试使用控制台调试它时.log我看到 for 循环中有一些错误
请尝试帮助我解决这个问题。
这是只有一个 for 循环的解决方案
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" placeholder="Student One" class ="student">
<input type="text" placeholder="Student Two" class ="student">
<input type="text" placeholder="Student Three" class ="student">
<br>
<label style="font-size: 30px;" id="student-1">Student One</label><br>
<label style="font-size: 30px;" id="student-2">Student Two</label><br>
<label style="font-size: 30px;" id="student-3">Student Three</label><br>
<button onClick="checkMarks();">Check</button>
<script type="text/javascript">
var students = document.querySelectorAll(".student");
function checkMarks(){
for(var i = 0; i < students.length; i++){
if (students[i].value >= 70 && students[i].value <= 100) color = "green";
else if (students[i].value >= 50 && students[i].value < 70) color = "blue";
else if (students[i].value >= 35 && students[i].value < 50) color = "yellow";
else color = "red";
document.getElementById('student-'+(i+1)).style.backgroundColor = color;
}
}
</script>
</body>
</html>告诉我是否需要任何帮助...
<table border>
<tr>
<th>Student</th><th>Mark</th>
</tr>
<tr data-student="1">
<td class="label">Student one</td>
<td><input type="number" min="0" max="100" /></td>
</tr>
<tr data-student="2">
<td class="label">Student two</td>
<td><input type="number" min="0" max="100" /></td>
</tr>
<tr data-student="3">
<td class="label">Student three</td>
<td><input type="number" min="0" max="100" /></td>
</tr>
<tr>
<td colspan="2" ><button>Do work</button></td>
</tr>
</table>
<script>
var scale=[
{color:'green',max:100,min:70},
{color:'blue',max:70,min:50},
{color:'yellow',max:50,min:35}
];
document.querySelector('button').addEventListener('click', function(e) {
document.querySelectorAll('tr[data-student]').forEach(function(row){
var mark = row.querySelector('input').value;
var color = 'red';
for(var i=0;i<scale.length;i++){
if(mark > scale[i].min && mark<=scale[i].max) {
color = scale[i].color;
break;
}
}
row.querySelector('.label').style.backgroundColor = color;
});
});
</script>这是一种可能的方法。记住：我不想做你的作业 - 你的要求可能会有所不同。这里没有人会为你做这件事。但是您可能会从此解决方案中获得一些想法。
直接回答您的问题：嵌套的 for 循环是您在这里的问题，因为删除它们可以完成工作：
button.addEventListener("click",function(){
for(var i = 0; i < students.length; i++){
if (students[i].value >= 70 && students[i].value <= 100){
label[i].style.backgroundColor = "green";
}else if (students[i].value >= 50 && students[i].value < 70){
label[i].style.backgroundColor = "blue";
}else if (students[i].value >= 35 && students[i].value < 50){
label[i].style.backgroundColor = "yellow";
}else{
label[i].style.backgroundColor = "red";
}
}
});