javascript - 试图让第二个按钮和第一个按钮一样工作

Question

我设法让第一个按钮运行取决于目标值和输入值。然后使用算术运算符控件，按钮将变为红色或绿色。但是我的第二个等等按钮不起作用。我不确定如何以不同的方式编码以使以下按钮像第一个按钮一样工作。我知道一遍又一遍地复制相似的代码是一种不好的做法，因为我有 31 个按钮。

请帮忙

// Get the button that opens the modal
var btn1 = document.getElementById('b1');
// When the user clicks on the button, open the modal 
btn1.onclick = function() {
    modal.style.display = "block";}
var btn2 = document.getElementById('b2');
btn2.onclick = function() {
    modal.style.display = "block";}
var btn3 = document.getElementById('b3');
btn3.onclick = function() {
    modal.style.display = "block";}
var btn4 = document.getElementById('b4'); 
btn4.onclick = function() {
    modal.style.display = "block";}
var btn5 = document.getElementById('b5'); 
btn5.onclick = function() {
    modal.style.display = "block";}
var btn6 = document.getElementById('b6'); 
btn6.onclick = function() {
    modal.style.display = "block";}
var btn7 = document.getElementById('b7'); 
btn7.onclick = function() {
    modal.style.display = "block";}
var btn8 = document.getElementById('b8'); 
btn8.onclick = function() {
    modal.style.display = "block";}
var btn9 = document.getElementById('b9'); 
btn9.onclick = function() {
    modal.style.display = "block";}
var btn10 = document.getElementById('b10'); 
btn10.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b11'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b12'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b13'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b14'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b15'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b16'); 
btn11.onclick = function() {
    modal.style.display = "block";}
var btn11 = document.getElementById('b17'); 
btn11.onclick = function() {
    modal.style.display = "block";}

// Get the modal
var modal = document.getElementById('myModal');

// 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";
}
// Get the Reset
var reset = document.getElementById('ResetModal');

var rst = document.getElementById('reset'); 
rst.onclick = function() {
    reset.style.display = "block";}

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    reset.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == reset) {
        reset.style.display = "none";
    }
}
//Arithematic Operator Control
// For Button 1
var target_value = document.getElementById('inputtarget');
function checkValue(){
  var inputvalue = document.getElementById('modal1');
  var buttonsubmit = document.getElementById('b1');
  var value = parseInt(inputvalue.value);
  var targetValue = parseInt(target_value.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 = '1';
  }
  modal.style.display = "none" ;
  return false;
}

div {
  border: 1px solid blue;
  background-color: yellow;
  height:580px;
  Width:290px;
  text-align: 0 auto:
}

#b1,#b2,#b3,#b4,#b5,#b6,
#b7,#b8,#b9,#b10,#b11,#b12,
#b13,#b14,#b15,#b16, #b17, #b18,
#b19,#b20,#b21,#b22, #b23, #b24, 
#b25,#b26,#b27,#b28, #b29, #b30, #b31 {
  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;
  box-shadow: 0 1px #999;
}
#inputtarget {
  height: 60px;
  width: 100px;
  font-size: 1.5rem;
  text-align: center;
  border: 1;
}
#b1:hover, #b2:hover, #b3:hover, #b4:hover, 
#b5:hover, #b6:hover, #b7:hover, #b8:hover, 
#b9:hover, #b10:hover, #b11:hover, #b12:hover,
#b13:hover, #b14:hover, #b15:hover, #b16:hover,
#b17:hover, #b18:hover, #b19:hover, #b20:hover,
#b21:hover, #b22:hover, #b23:hover, #b24:hover,
#b25:hover, #b26:hover, #b27:hover, #b28:hover,
#b29:hover, #b30:hover, #b31:hover {
  background-color: grey;
}
#b1:active, #b2:active, #b3:active, 
#b4:active, #b5:active, #b6:active, 
#b7:active, #b8:active, #b9:active, 
#b10:active, #b11:active, #b12:active, 
#b13:active, #b14:active, #b15:active, 
#b16:active, #b17:active, #b18:active, 
#b19:active, #b20:active, #b21:active, 
#b22:active, #b23:active, #b24:active, 
#b25:active, #b26:active, #b27:active, 
#b28:active, #b29:active, #b30:active, #b31: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;
  }

/* Reset (background) */
.reset {
    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 */
}

/* Reset Content/Box */
.reset-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 240px;
    height: 200px;
}
#resetyes, #resetno {
  height:70px;
  width:100px;
  text-align: center;
}
/* The Close Button */
.close1 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

<!DOCTYPE html>
<body>
<div>
  
<!-- All Buttons in Matrix Form Production -->
  <button id="b1" style="position:absolute; left:30px; top:100px">1</button>
  <button id="b2" style="position:absolute; left:80px; top:100px">2</button>
  <button id="b3" style="position:absolute; left:130px; top:100px">3</button>
  <button id="b4" style="position:absolute; left:180px; top:100px">4</button>
  <button id="b5" style="position:absolute; left:30px; top:150px">5</button>
  <button id="b6" style="position:absolute; left:80px; top:150px">6</button>
  <button id="b7" style="position:absolute; left:130px; top:150px">7</button>
  <button id="b8" style="position:absolute; left:180px; top:150px">8</button>
  <button id="b9" style="position:absolute; left:230px; top:150px">9</button>
  <button id="b10" style="position:absolute; left:30px; top:200px">10</button>
  <button id="b11" style="position:absolute; left:80px; top:200px">11</button>
  <button id="b12" style="position:absolute; left:230px; top:200px">12</button>
  <button id="b13" style="position:absolute; left:30px; top:250px">13</button>
  <button id="b14" style="position:absolute; left:80px; top:250px">14</button>
  <button id="b15" style="position:absolute; left:230px; top:250px">15</button>
  <button id="b16" style="position:absolute; left:30px; top:300px">16</button>
  <button id="b17" style="position:absolute; left:80px; top:300px">17</button>
  <button id="b18" style="position:absolute; left:130px; top:300px">18</button>
  <button id="b19" style="position:absolute; left:180px; top:300px">19</button>
  <button id="b20" style="position:absolute; left:230px; top:300px">20</button>
  <button id="b21" style="position:absolute; left:30px; top:350px">21</button>
  <button id="b22" style="position:absolute; left:80px; top:350px">22</button>
  <button id="b23" style="position:absolute; left:130px; top:350px">23</button>
  <button id="b24" style="position:absolute; left:180px; top:350px">24</button>
  <button id="b25" style="position:absolute; left:30px; top:400px">25</button>
  <button id="b26" style="position:absolute; left:80px; top:400px">26</button>
  <button id="b27" style="position:absolute; left:30px; top:450px">27</button>
  <button id="b28" style="position:absolute; left:80px; top:450px">28</button>
  <button id="b29" style="position:absolute; left:30px; top:500px">29</button>
  <button id="b30" style="position:absolute; left:80px; top:500px">30</button>
  <button id="b31" style="position:absolute; left:105px; top:500px">31</button>
  <p style="position:absolute; left:175px; top:410px; font-size:20px; 
            font-weight:bold">TARGET</p>
  <input id="inputtarget" type="number" ondrop="returnfalse;" onpaste="returnfalse;" 
           onkeypress='return event.charCode>=48 && event.charCode<=57';
         style="position:absolute; left:165px; top:460px"><br>
  <button id="reset" style="position:absolute; left:30px; top: 60px">Reset</button>
</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=modal1 type="number" ondrop="returnfalse;" onpaste="returnfalse;" 
           onkeypress='return event.charCode>=48 && event.charCode<=57'; 
           style=font-size:20px><br>
    <br>
    <button id="submit" onclick= "return checkValue()" >SUBMIT</button>
  </div>
  
<!-- The Reset Box -->
<div id="ResetModal" class="reset">
  <!-- Reset content -->
  <div class="reset-content">
    <span class="close1">&times;</span>
    <p>Are you sure ?  <br>
       This Action cannot be undone.</p>
    <input id=resetyes type="button" value="YES">
    <input id=resetno type="button" value="NO">
  </div>
</body>

Answer 1

这应该对你有帮助!

主要是，我在按钮事件循环中设置 id 作为target_value 按钮的属性，这里:

// 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"; 
  }
}

然后我在 checkValue() 函数中获取它，如下所示:

var buttonsubmit = document.getElementById( TV.getAttribute('startbtn') );

这样，基本上就可以取代您在脚本开始时对手动定位进行的硬编码。

嗯，干杯!

// 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])');
// Get the Reset
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset'); 
// target value
var TV = document.getElementById('inputtarget');
rst.onclick = function() {
    reset.style.display = "block";}
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    reset.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == reset) {
        reset.style.display = "none";
    }
}
// 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";
}
//Arithematic Operator Control
// For Button 1
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 = '1';
  }
  modal.style.display = "none" ;
  return false;
}

div {
  border: 1px solid blue;
  background-color: yellow;
  height: 580px;
  Width: 290px;
  text-align: 0 auto:
}

#b1,
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9,
#b10,
#b11,
#b12,
#b13,
#b14,
#b15,
#b16,
#b17,
#b18,
#b19,
#b20,
#b21,
#b22,
#b23,
#b24,
#b25,
#b26,
#b27,
#b28,
#b29,
#b30,
#b31 {
  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;
  box-shadow: 0 1px #999;
}

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

#b1:hover,
#b2:hover,
#b3:hover,
#b4:hover,
#b5:hover,
#b6:hover,
#b7:hover,
#b8:hover,
#b9:hover,
#b10:hover,
#b11:hover,
#b12:hover,
#b13:hover,
#b14:hover,
#b15:hover,
#b16:hover,
#b17:hover,
#b18:hover,
#b19:hover,
#b20:hover,
#b21:hover,
#b22:hover,
#b23:hover,
#b24:hover,
#b25:hover,
#b26:hover,
#b27:hover,
#b28:hover,
#b29:hover,
#b30:hover,
#b31:hover {
  background-color: grey;
}

#b1:active,
#b2:active,
#b3:active,
#b4:active,
#b5:active,
#b6:active,
#b7:active,
#b8:active,
#b9:active,
#b10:active,
#b11:active,
#b12:active,
#b13:active,
#b14:active,
#b15:active,
#b16:active,
#b17:active,
#b18:active,
#b19:active,
#b20:active,
#b21:active,
#b22:active,
#b23:active,
#b24:active,
#b25:active,
#b26:active,
#b27:active,
#b28:active,
#b29:active,
#b30:active,
#b31: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;
}


/* Reset (background) */

.reset {
  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 */
}


/* Reset Content/Box */

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

#resetyes,
#resetno {
  height: 70px;
  width: 100px;
  text-align: center;
}


/* The Close Button */

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- All Buttons in Matrix Form Production -->
<button id="b1" style="position:absolute; left:30px; top:100px">1</button>
<button id="b2" style="position:absolute; left:80px; top:100px">2</button>
<button id="b3" style="position:absolute; left:130px; top:100px">3</button>
<button id="b4" style="position:absolute; left:180px; top:100px">4</button>
<button id="b5" style="position:absolute; left:30px; top:150px">5</button>
<button id="b6" style="position:absolute; left:80px; top:150px">6</button>
<button id="b7" style="position:absolute; left:130px; top:150px">7</button>
<button id="b8" style="position:absolute; left:180px; top:150px">8</button>
<button id="b9" style="position:absolute; left:230px; top:150px">9</button>
<button id="b10" style="position:absolute; left:30px; top:200px">10</button>
<button id="b11" style="position:absolute; left:80px; top:200px">11</button>
<button id="b12" style="position:absolute; left:230px; top:200px">12</button>
<button id="b13" style="position:absolute; left:30px; top:250px">13</button>
<button id="b14" style="position:absolute; left:80px; top:250px">14</button>
<button id="b15" style="position:absolute; left:230px; top:250px">15</button>
<button id="b16" style="position:absolute; left:30px; top:300px">16</button>
<button id="b17" style="position:absolute; left:80px; top:300px">17</button>
<button id="b18" style="position:absolute; left:130px; top:300px">18</button>
<button id="b19" style="position:absolute; left:180px; top:300px">19</button>
<button id="b20" style="position:absolute; left:230px; top:300px">20</button>
<button id="b21" style="position:absolute; left:30px; top:350px">21</button>
<button id="b22" style="position:absolute; left:80px; top:350px">22</button>
<button id="b23" style="position:absolute; left:130px; top:350px">23</button>
<button id="b24" style="position:absolute; left:180px; top:350px">24</button>
<button id="b25" style="position:absolute; left:30px; top:400px">25</button>
<button id="b26" style="position:absolute; left:80px; top:400px">26</button>
<button id="b27" style="position:absolute; left:30px; top:450px">27</button>
<button id="b28" style="position:absolute; left:80px; top:450px">28</button>
<button id="b29" style="position:absolute; left:30px; top:500px">29</button>
<button id="b30" style="position:absolute; left:80px; top:500px">30</button>
<button id="b31" style="position:absolute; left:105px; top:500px">31</button>
<p style="position:absolute; left:175px; top:410px; font-size:20px; 
            font-weight:bold">TARGET</p>
<input id="inputtarget" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:165px; top:460px"><br>
<button id="reset" style="position:absolute; left:30px; top: 60px">Reset</button>
</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" onclick="return checkValue()">SUBMIT</button>
  </div>

  <!-- The Reset Box -->
  <div id="ResetModal" class="reset">
    <!-- Reset content -->
    <div class="reset-content">
      <span class="close1">&times;</span>
      <p>Are you sure ? <br> This Action cannot be undone.</p>
      <input id=resetyes type="button" value="YES">
      <input id=resetno type="button" value="NO">
    </div>