Question

<!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]

当我尝试使用console.log对其进行调试时，我发现for循环存在一些错误

请尝试帮助我解决此问题。

Answer 1

<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";
            }
        }
    });

Answer 2

只有一个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>

如果需要任何帮助，请告诉我...

我想根据输入文本框中的标记来更改学生标签的颜色，但是我的java脚本代码中有问题

2 个答案: