<!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 есть ошибка

Пожалуйста, попробуйте помочь мне решить эту проблему.

0
Jimit Raval 25 Сен 2018 в 09:23

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>

Скажите, если вам понадобится помощь ...

0
GYaN 25 Сен 2018 в 07:43
<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";
            }
        }
    });
0
ZorgoZ 25 Сен 2018 в 07:24