时间戳

首页 > 解决方案 > 检查字符串是否包含大于/小于的数字并在 DOM 中更改其样式

javascript - 检查字符串是否包含大于/小于的数字并在 DOM 中更改其样式

问题描述

我正在尝试编写一个函数，该函数根据该字符串中的数字更改学生评分字符串的颜色。

如何让 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 以上为绿色。

标签： javascriptfor-loopif-statementdom

解决方案

完成它的一种方法示例，检查 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>

推荐阅读