使用“重置”按钮重置所有按钮inner.text和background.color

时间：2018-01-08 21:47:19

标签： javascript html

我尝试将所有按钮inner.text重置为原始值（1,2,3），将background.color重置为灰色，并带有重置按钮。 我认为for循环有问题，因为当我放置i = 0 i＆lt; 3，它的工作原理。我需要它是btns.length，因为我稍后会添加更多按钮。 我做错了什么＆＃34; YES＆＃34;按钮代码？

enter image description here

＆＃13;
＆＃13; 
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset'); 
rst.onclick = function() {
    reset.style.display = "block";
}
//Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno'); 
rstno.onclick = function() {
    reset.style.display = "none";
}
// Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes'); 
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
for (var i = 0; i < btns.length; i++) { 
    rstyes.onclick = function() {
    var btn = document.getElementById("b"+i);
    btn.innerText=i;
    btn.style.background="#D3D3D3";
    reset.style.display = "none";
  }
}
// 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";
}

// 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])');
// target value
var TV = document.getElementById('inputtarget');
// 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";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
//Arithematic Operator Control
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 = ''
  }
  modal.style.display = "none" ;
  return false;
}
＆＃13; 
#b1,
#b2,
#b3 {
  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;
  font-size: 0.5rem;
  box-shadow: 0 1px #999;
}

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

#trigger {
  height: 0 auto;
  width: 100px;
  font-size: 0.5rem;
  text-align: center;
}
#b1:hover,
#b2:hover,
#b3:hover {
  background-color: grey;
}

#b1:active,
#b2:active,
#b3: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; 
<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>
<input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px"><br>
<input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
<input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</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" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
  </div>
</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>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

标记，

长度从1开始，您使用的循环从零开始。 您需要在循环中修改i的使用或在b0 处开始按钮ID。当前编写html和js的方式，循环在第一次迭代期间不执行任何操作。我建议将id更改为从b0开始并使用上面更新的for循环。

如果将按钮ID更改为从零开始，则应该能够在循环中继续使用条件i < btns.length。

快乐的节目！

答案 1 :(得分：0)

您需要在for loop功能中移动rstyes.onclick。您只有一个重置是按钮，因此您不需要为该一个按钮提供3个单击功能。然后在for loop从1开始并将其设置为btns.length + 1结束，因为你的btns数组索引从0开始，你的按钮id从1开始。

＆＃13;
＆＃13; 
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset');
rst.onclick = function() {
    reset.style.display = "block";
  }
  //Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno');
rstno.onclick = function() {
    reset.style.display = "none";
  }
  // Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes');
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');

    rstyes.onclick = function() {
      for (var i = 1; i < btns.length + 1; i++) {
        var btn = document.getElementById("b" + i);
        btn.innerText = i;
        btn.style.background = "#D3D3D3";
        reset.style.display = "none";
      }
    };
// 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";
}

// 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])');
// target value
var TV = document.getElementById('inputtarget');
// 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";
  }
  // When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  //Arithematic Operator Control
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 = ''
  }
  modal.style.display = "none";
  return false;
}
＆＃13; 
#b1,
#b2,
#b3 {
  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;
  font-size: 0.5rem;
  box-shadow: 0 1px #999;
}

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

#trigger {
  height: 0 auto;
  width: 100px;
  font-size: 0.5rem;
  text-align: center;
}

#b1:hover,
#b2:hover,
#b3:hover {
  background-color: grey;
}

#b1:active,
#b2:active,
#b3: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; 
<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>
  <input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px">
  <br>
  <input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
  <input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</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" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
  </div>
</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>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题