Question

我是JS和Jquery的新手，我现在正在从一本书中学习，并且我试图通过建立一个小的评分程序来实践它。

我想要输入框，并根据框中的数字改变颜色。但是，我认为我正在以错误的方式解决这个问题，因为我正在使用这个课程。结果＆＃39;定位背景颜色的变化，所以无论第一个数字是什么，它都会改变所有元素的结果＆＃39;结果＆＃39;。

我遇到的另一个问题是，如果我使用的话，背景颜色会发生变化

list[i]/dict[key]

但如果我使用

，它根本不会改变背景颜色

.getElementById('grade').value;

这是我正在处理的内容的链接，我希望我已经清楚地解释了我的问题，我们将不胜感激任何帮助或建议。

https://jsfiddle.net/michaelgriffin87/m9v5xsbp/9/

Answer 1

工作解决方案......

<强> HTML

<div class="container">
<div class="row">
  <input class="name" placeholder="A Student name"></input>
  <input id="grade" class="grade result"></input>
</div>
<div class="row">
   <input class="name" placeholder="A Student name"></input>
   <input id="grade" class="grade result"></input>
</div>
 <button class="submit" onClick="checkGrade()">Button</button>
</div>

纯Javascript

window.checkGrade = function(){
  var gd = document.getElementsByClassName('grade');
  for(var i = 0; i < gd.length; i++){
    var g = document.getElementsByClassName('grade')[i].value;
    var g1 = document.getElementsByClassName('grade')[i];
    if(g >=80) {
      g1.style.backgroundColor = "green";
    }else if(g >=60) {
      g1.style.backgroundColor = "yellow";
    }else if(g >=40) {
      g1.style.backgroundColor = "orange";
    }else if(g >=0) {
      g1.style.backgroundColor = "red";
    }else {
      g1.style.backgroundColor = "pink";
    }
  }

}

查看此JS Fiddle

Answer 2

没有getElementByClassName - 有复数getElementsByClassName

.getElementsByClassName('grade')[0].value;

这将获取DOM中具有类grade的第一个节点的值。例如。

如果你正在使用jQuery，你可能想要这样的东西来影响grade类的所有节点：

var $grades = $('.grade');

$grades.each(function(){
    $(this).css('backgroundColor', foo);
});

Answer 3

我立即看到的一个问题是.getElementByClassName这应该是.getElementsByClassName（注意s元素 s ）。然后它返回一个数组，这样你就需要遍历对象并从每个对象中获取值。

尝试构建JavaScript评分程序

3 个答案: