禁用按鈕直到達到一個數字

Question

所以我有一個代碼，所以當我按下一個按鈕時，一個數字會上升。 這是html：

<button type="button" class="btn btn-default" onclick="javascript:btnClick()">+1</button>

這是 JavaScript：

 function btnClick(){
timesClicked += 1;
    document.getElementById('timesClicked').innerHTML = timesClicked;
return true 
}

所以我有一個帶有 +1 的按鈕，所以當我按下它時，數字會上升，我需要一個禁用的按鈕，直到該數字變為 5，然后變為可點擊，這可能嗎？ 我仍在學習 Javascript，感謝所有幫助。

Answer 1

你可以嘗試這樣的事情：

 document.getElementById("button").disabled = true; timesClicked = 0; function btnClick(){ timesClicked += 1; document.getElementById('timesClicked').innerHTML = timesClicked; if(timesClicked > 5){ document.getElementById("button").disabled = false; } }

 <button type="button" id="button" class="btn btn-default" onclick="btnClick()">+1</button>

Answer 2

如果按鈕被禁用，用戶將無法與其交互。 嘗試以下

 window.onload=function() { var count =0; document.getElementById("btn").addEventListener("click", function() { count++; if(count === 5) { this.innerHTML = "5 clicks reached!"; } }); };

 <button id="btn">Click</button>

Answer 3

 [].forEach.call(document.querySelectorAll("[data-click-vote]"), function(btn) { btn.addEventListener("click", vote); }); function vote() { this.innerHTML = this.value=Math.min(++this.value, 5); }

 <button value="0" name="movie1" data-click-vote>+1</button> The Revenant<br> <button value="0" name="movie2" data-click-vote>+1</button> Dracula<br> <button value="0" name="movie3" data-click-vote>+1</button> The Usual Suspect<br>

• 多個按鈕
• 同時更新value和innerHTML
• 您可以使用<form>提交值

Answer 4

您可以使用 JS 和 CSS 實現您的要求，如下面的解決方案。 你還沒有用 CSS 標記它，但你可能也想看看這個。

按鈕只是一個禁用的跨度。 點擊被注冊，當滿足計數要求時，它就會活躍起來並使用實際的處理程序代碼處理您的點擊。 （您可以添加處理程序而不是打印點擊計數）

 window.onload = function() { var count = 1; document.getElementById("btn").addEventListener("click", function() { count++; this.innerHTML = "+" + count; if (count >= 5) { this.className = "btnenabled"; this.innerHTML = "Print Click Count!"; if(count > 5) { document.getElementById("counter").innerHTML= "Click Count is " + count; } } }); };

 .btnenabled { width:200px; background-color: blue; padding: 3px; border-radius: 3px; color: white; font-weight: bold; display:block; text-align:center; } .btnenabled:hover { background-color:purple; } .btndisabled { width:200px; padding: 3px; border-radius: 3px; display:block; text-align:center; background-color: grey; color: #F0F0F0; font-weight: 100; }

 <span id="btn" class="btndisabled"> +1 </span> <span id="counter"></span>

Answer 5

 function set(){ document.getElementById("button").disabled = true; setInterval(function(){ var now = document.getElementById("button").innerHTML; var one = "1"; var all = parseInt(now,10)-parseInt(one,10); if(all != 3 && all !=4){ document.getElementById("button").innerHTML =parseInt(now,10)+parseInt(one,10); document.getElementById("button").disabled = true; }else{ document.getElementById("button").disabled = false; document.getElementById("moreclick").innerHTML = "done"; document.getElementById("button").innerHTML="5"; } }, 1000); } 

 <button type="button" id="button" class="btn btn-default" onclick=set()>1</button> <span id=moreclick></span> 

 function set(){ document.getElementById("button").disabled = true; setInterval(function(){ var now = document.getElementById("button").innerHTML; var one="1"; if(now != 5){ document.getElementById("button").innerHTML =parseInt(now,10)+parseInt(one,10); document.getElementById("button").disabled = true; }else{ document.getElementById("button").disabled = false; document.getElementById("moreclick").innerHTML = "done"; } }, 1000); } 

 <button type="button" id="button" class="btn btn-default" onclick=set()>1</button> <span id=moreclick></span>