檢查是否單擊了按鈕，然后執行某些操作

Question

我有一個帶有選項卡的表格，其中包括按鈕。 在用戶單擊下一步之前，我要檢查是否至少單擊了一個或所有按鈕，如果單擊了，則顯示下一個選項卡。 如果沒有，則會彈出警報！

<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>

 <script type="text/javascript" >
    document.getElementById("day").onclick = 
     function(event) {
    var btn= 
      document.getElementsByClassName("btns") ;
        for(x=0; x<btn.length; x++){
    if(btn[x].click == true){
        prompt("open Next page?");
              } 
        else {
       alert("please click at least one button");
    } 
   } 

 </script>

Answer 1

如果您願意，請嘗試一下。

<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>

<script type="text/javascript" >
   var clickedData = "";
   function setClicked(data){
       clickedData = data;
   }
   var btn = document.getElementsByClassName("btns");
    for(x = 0 ; x < btn.length; x++){
        if(btn[x].id !=="day"){
           const val = btn[x].innerHTML;
           btn[x].onclick = function(){ setClicked(val); } 
        }
     } 
   document.getElementById("day").onclick = 
     function(event) {
        if (clickedData !== ""){
           prompt("open Next page?");
        }else{
           alert("please click at least one button");
        }
     }

</script>

Answer 2

更好的方法是使用checkboxes因為您want to check if at least one or all the buttons have been clicked 。 然后附加onchange事件。

 var btns = document.getElementsByClassName("radio-btn") ; var len = btns.length; var isSelected = false; while(len--) { btns[len].onchange = function() { isSelected = this.checked ? true : false; }; } document.getElementById("day").onclick = function() { if(isSelected) { alert("open Next page?"); } else { alert("please click at least one button"); } } 

 <form onsubmit="return false;"> <input type="checkbox" name="time" class="radio-btn rem"> Morning<br> <input type="checkbox" name="time" class="radio-btn rem"> Afternoon<br> <input type="checkbox" name="time" class="radio-btn rem"> Evening<br> <button class="btns" id="day" >Next</button> </form>