试图使第二个按钮像第一个按钮一样工作

时间：2018-01-04 19:36:06

标签： javascript jquery html css button

我设法获得第一个运行按钮取决于目标值和输入值。然后使用Arithematic操作员控制，按钮将变为红色或绿色。但我的第二个按钮不起作用。我不确定如何以不同的方式编码以使以下按钮像第一个按钮一样工作。 我知道一遍又一遍地复制类似的代码是不好的做法，因为我有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>

1 个答案:

答案 0 :(得分：0)

这应该对你有帮助！

主要的是，我在按钮事件循环中将setting 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') );

因此，基本上，就像在开始编写脚本时那样替换手动定位的硬编码。

好吧，欢呼！

＆＃13;
＆＃13; 
// 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;
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题