javascript - 更改目标值按钮可通过值比较更改每个按钮的颜色

Question

我正在尝试根据目标值的变化更改按钮背景颜色。 最初，我设置了一个目标值，例如“10”，当我单击“1”按钮并将其更改为“9”时。因此，我的背景颜色按钮更改为“红色”，因为输入值小于目标值。 然而，在某些时候，我想更改我的目标值并使用“更改目标值”按钮触发。对于触发器，它将重新比较目标值与按钮的值，并根据算术运算符更改背景颜色。 不知何故，我的代码不起作用。请帮忙。

// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
// target value
var TV = document.getElementById('inputtarget');
// Each button click => open modal 
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    TV.setAttribute('startbtn', this.id);
    modal.style.display = "block";
  }
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
  }
  // When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  //Arithematic Operator Control
function checkValue() {
  var inputvalue = document.getElementById('modal');
  var buttonsubmit = document.getElementById(TV.getAttribute('startbtn'));
  var value = parseInt(inputvalue.value);
  var targetValue = parseInt(TV.value);

  if (value < targetValue) {
    buttonsubmit.style.background = 'red';
    buttonsubmit.innerText = value;
  } else if (value >= targetValue) {
    buttonsubmit.style.background = 'green';
    buttonsubmit.innerText = value;
  } else {
    buttonsubmit.style.background = '';
    buttonsubmit.innerText = ''
  }
  modal.style.display = "none";
  return false;
}
// Change Target Value
var CTV = document.getElementById('trigger'); 
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
  CTV.onclick = function() {
    for (var i = 1; i < btns.length + 1; i++){
      var btn = document.getElementById("b"+i);
        for btn.style.background = 'red' && 'green'){
          if ( btn.innerHTML<targetvalue ){
            btn.style.background='red';
          }
          else if ( btn.innerHTML>=targetvalue ){
            btn.style.background= 'green';
          }
          else
            btn.style.background= '';
        }
    }
  }

#b1,
#b2,
#b3 {
  background-color: rgb(211, 211, 211);
  height: 50px;
  width: 50px;
  font-family: Arial;
  font-weight: bold;
  box-shadow: 0 1px #999;
}

#b30,
#b31 {
  background-color: rgb(211, 211, 211);
  height: 50px;
  width: 25px;
  font-family: Arial;
  font-weight: bold;
  font-size: 0.5rem;
  box-shadow: 0 1px #999;
}

#inputtarget {
  height: 60px;
  width: 100px;
  font-size: 1.5rem;
  text-align: center;
  border: 1;
}

#trigger {
  height: 0 auto;
  width: 100px;
  font-size: 0.5rem;
  text-align: center;
}

#b1:hover,
#b2:hover,
#b3:hover {
  background-color: grey;
}

#b1:active,
#b2:active,
#b3:active {
  background-color: silver;
  box-shadow: 1px #666;
  transform: translateY(2px);
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 240px;
  height: 200px;
}

#modal1 {
  height: 70px;
  width: 100px;
  text-align: center;
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<div>
  <!-- All Buttons in Matrix Form Production -->
  <button id="b1" style="position:absolute; left:30px; top:10px">1</button>
  <button id="b2" style="position:absolute; left:80px; top:10px">2</button>
  <button id="b3" style="position:absolute; left:130px; top:10px">3</button>
  <input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:70px">
  <br>
  <input id="trigger" type=button value="Change Target Value" style="position:absolute; left:165px; top: 80px">
</div>
<!-- The Modal Box 1-->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>PLEASE INPUT QUANTITY</p>
    <input id="modal" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px>
    <br>
    <br>
    <button id="submit" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
  </div>
</div>

Answer 1

我认为您刚刚在 for 循环中犯了一个错误。这是事件处理程序部分，稍作重写:

// Change Target Value
var CTV = document.getElementById('trigger'); 
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');

CTV.onclick = function () {
  for (var i=0; i < btns.length; i++) {
    var btn = btns[i];
    if ( btn.innerHTML<targetvalue ){
      btn.style.background='red';
    }
    else if ( btn.innerHTML>=targetvalue ){
      btn.style.background= 'green';
    }
    else {
      btn.style.background= '';
    }
  }
}