检查字符串是否包含大于/小于的数字，并在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

完成它的一种方法示例，检查forEach中的examMark并将适当的类应用于每行中的周围元素。

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语句不能正常工作时，它对我有用。替换所有<with <=或> =。