я хочу изменить цвет метки ученика в соответствии с оценками из текстового поля ввода, но есть проблема в моем коде java-скрипта - PullRequest
Новая
       1

я хочу изменить цвет метки ученика в соответствии с оценками из текстового поля ввода, но есть проблема в моем коде java-скрипта

0 голосов
/ 25 сентября 2018 
<!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-скрипте, я использовал два Для первого цикла первый цикл для студента [i] второй для цикла для метки [j]

Когда я пытаюсь отладить его с помощью console.log, я вижу, что есть какая-то ошибка в циклах for

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

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Вот ваше решение только с одним для цикла 

    <!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 голосов
/ 25 сентября 2018 

<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";
            }
        }
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...