如何运行几个按钮的模态和算术运算符

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的值变量