如果变量大于 javascript 中的 x，则向元素添加一个类

Question

我有一个带有 id 的元素counter我还有一个名为abacus当 abacus 的值大于x - 我希望将一个 CSS 类添加到具有 id `counter 的元素var abacus = 8  if (abacus > 5) {    document.getElementById("counter");    element.classList.add("greater");  }  else {    document.getElementById("counter");    element.classList.add("less");  }<div id="counter"></div>但是，当我运行此代码时，未应用 css 类。

Answer 1

function check_number(){

   var abacus = 8

   var num = document.getElementById("num").value

   if (abacus > num) {

      var element = document.getElementById("counter");

      element.classList.add("blackBG");

   }

   else {

       var element = document.getElementById("counter");

       element.classList.remove("blackBG");

   }

}

.blackBG {

        background-color:#c79d9d;

 }

<div id="counter">

    some text

</div>

  

<input type="text" id="num">

<button onclick="check_number()">click </button>

Answer 2

当您访问该元素时，您需要将其分配给一个变量或将附加的 js 链接到它。

var abacus = 8

  if (abacus > 5) {

    document.getElementById("counter").classList.add("greater");

  }

  else {

    document.getElementById("counter").classList.add("less");

  }

<div id="counter">

</div>