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

【问题标题】：Trying to make the second and so forth buttons working like the first button试图使第二个等按钮像第一个按钮一样工作
【发布时间】：2018-01-04 19:36:06
【问题描述】：

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

【问题讨论】：

  • 天哪，老兄。在这些按钮上放置一个类并将您的点击逻辑绑定到该类。您在脚本开始时获得了大量的重复代码。
  • 抱歉，我是这些语言的新手
  • 欢迎来到 Stack Overflow！由于所有重复，很难遵循这个例子。考虑尝试在minimal viable example 中重现，可能只有两个按钮。

标签： javascript jquery html css button


【解决方案1】：

这应该对你有帮助！

主要的是，我是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') );

因此，基本上，它取代了您在脚本开始时对手动定位的硬编码。

嗯，干杯！

// 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>

【讨论】：

  • 嗨 Kresimir，模态有问题。数字按钮应该只打开“myModal”，而重置按钮应该只打开“ResetModal”。现在，数字按钮同时打开“MyModal”和“ResetModal”
猜你喜欢
  • 2015-07-16
  • 2014-04-19
  • 1970-01-01
  • 1970-01-01
  • 2017-08-06
  • 1970-01-01
  • 2023-03-22
  • 2015-09-30
  • 2020-10-28
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode