javascript - 如何为多个按钮运行模态和算术运算符

Question

我在为模态和算术运算符控件添加添加按钮时遇到问题。详细请参阅我的代码。 当我只有一个按钮时它就起作用了。添加第二个按钮后，算术运算符控件无法正常工作。 有没有一种更好的方法来仅使用一个算术运算符控件来运行多个按钮？

以下是链接:

// 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');
// When the user clicks on the button, open the modal 
btn2.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";
}
//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;
}
// For Button 2
var target_value = document.getElementById('inputtarget');
function checkValue(){
  var inputvalue2 = document.getElementById('modal1');
  var buttonsubmit2 = document.getElementById('b2');
  var value2 = parseInt(inputvalue2.value);
  var targetValue2 = parseInt(target_value.value);
  
  if (value2 < targetValue2){
    buttonsubmit2.style.background = 'red' ;
    buttonsubmit2.innerText = value ;
  }
  else if (value2 >= targetValue2){
    buttonsubmit2.style.background = 'green';
    buttonsubmit2.innerText = value ;
  }
  else{
    buttonsubmit2.style.background = '';
    buttonsubmit2.innerText = '2';
  }
  modal.style.display = "none" ;
  return false;
}

#inputtarget {
  height: 60px;
  width: 100px;
  font-size: 1.5rem;
  text-align: center;
  border: 1;
  }
/* 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;
  }

<!-- Button and Target Value -->
<div>
<button id="b1" onclick=return checkValue() style="position:absolute; left:30px; top:100px">1</button>
  <button id="b2" onclick=return checkValue() style="position:absolute; left:80px; top:100px">2</button>
<input id="inputtarget" type="number" ondrop="returnfalse;" onpaste="returnfalse;" 
           onkeypress='return event.charCode>=48 && event.charCode<=57';><br>
</div>  

<!-- The Modal Box -->
<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>

</div>

Answer 1

假设您希望每个按钮的行为都相同，因此如果模式框中的值大于或等于主输入字段中的值(inputtarget )，如果较小则为红色，您可以通过在每个按钮的 onclick 函数中设置该变量来将单击的按钮存储在变量中，并使用它来确定当提交按钮时要更改哪个按钮模式框已被单击:

// make a variable to store the number of the button:
var btn = 0;
// 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";
    btn=1;
}
var btn2 = document.getElementById('b2');
// When the user clicks on the button, open the modal 
btn2.onclick = function() {
    modal.style.display = "block";
    btn=2;
}
// 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";
}
//Arithematic Operator Control
var target_value = document.getElementById('inputtarget');
function checkValue(){
    var inputvalue = document.getElementById('modal1');
    var buttonsubmit = document.getElementById('b' + btn);
    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;
}

    #inputtarget {
      height: 60px;
      width: 100px;
      font-size: 1.5rem;
      text-align: center;
      border: 1;
      }
    /* 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;
      }

<!-- Button and Target Value -->
<div>
    <button id="b1" onclick=return checkValue() style="position:absolute; left:30px; top:100px">1</button>
    <button id="b2" onclick=return checkValue() style="position:absolute; left:80px; top:100px">2</button>
    <input id="inputtarget" type="number" ondrop="return false;" onpaste="return false;" 
        onkeypress="return event.charCode>=48 && event.charCode<=57;"><br>
</div>  
    
<!-- The Modal Box -->
<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="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>
</div>

顺便说一句，如果您不想对每个按钮使用相同的算法，您当然可以考虑进一步使 clickValue 函数的行为取决于 >btn 变量。