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

Question

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

Как попросить 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.

Answer 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>

Answer 2

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