禁用按钮直到达到一个数字

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>