Проверьте, содержит ли строка число / меньше или измените ее стиль в DOM

2

Я пытаюсь написать функцию, которая меняет цвет строк оценки ученика в соответствии с числом внутри этой строки.

Как попросить JavaScript найти число внутри строки, а также реализовать оператор if?


// courses grades function

function passStudentInfo(studentID) {

  $.get("https://college.com/api/getCourses/" + studentID, function (data) {
    if (!data || !data.length) {
      console.log = 'not getting courses';
      return;
    }
data.forEach(function(element) {
      document.getElementById('grade').innerHTML += element.courseName + ": " + element.examMark + "<br />" + "<hr>"; 


 //this is the function I'm trying to write

function colors() {

  let allGrades = document.getElementById('grade');

  for (i = 0; i < allGrades.length; i++ ) {

        if ( ?? < 60) {
      allGrades[i].innerHTML.style.color = 'red';
    } else if ( ?? >= 60 && x < 80 ) {
      allGrades[i].innerHTML.style.color = 'yellow';
    }
      else {
        allGrades[i].innerHTML.style.color = 'green';
      }
    }

  }

  colors()

//this is my html page
<h1 class="green">Your Grades</h1>
<h2>A summary of Your achievements</h2>

   <div class="container achieve">
      <p id="grade"></p>
   </div>


.achieve {
  border: 2px solid #3d3e5b;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.achieve p {
  font-weight: 600;
  font-size: 1.5;
}

Я ожидаю вывод строки красного цвета для предложения, содержащего оценку ниже 60, желтого для 60-80 и зеленого для выше 80.

  • 1
    Пожалуйста, включите весь соответствующий код, включая HTML и CSS.
  • 0
    Почему это не установлено, когда это записывается?
Показать ещё 7 комментариев
Теги:
for-loop
if-statement
dom

2 ответа

1
Лучший ответ

Пример одного способа сделать это, проверяя examMark в forEach и применяя соответствующий класс к окружающему элементу в каждой строке.

var data = [
  {courseName: 'Math', examMark: 76.4},
  {courseName: 'Science', examMark: 66.3},
  {courseName: 'Spanish', examMark: 98.6}
];

data.forEach(function(element) {
  // figure out what color the grade gives
  var gradeColor = 'red';
  if (element.examMark >= 80) {
    gradeColor = 'green';
  } else if (element.examMark >= 60) {
    gradeColor = 'yellow';
  }

  document.getElementById('grade').innerHTML +=  "<div class='" + gradeColor + "'>" + element.courseName + ": " + element.examMark + "</div>";
});
.red {
  color: red;
}
.yellow {
  color: yellow;
}
.green {
  color: green;
}
<div id='grade'></div>
Поделиться
  • 0
    большое Вам спасибо. хороший трюк с именем цвета div.
-2

для ваших утверждений If попробуйте использовать> = или <=. это сработало для меня, когда мои заявления if не работали правильно. Замените все свои <на <= или> =.

Поделиться
  • 0
    хорошая идея Томас. Тпх
  • 0
    Простое изменение условия не поможет. Я рекомендовал вам изучить операторы сравнения developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню