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

您可以尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果禁用此按钮，则用户无法与其进行交互。请尝试以下

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

多个按钮
同时更新value和innerHTML
您可以使用<form>

Answer 4

您可以使用JS和CSS实现您的要求，如下面的解决方案。你还没有用CSS标记它，但你也可能想看看它。

按钮只是一个禁用范围。点击已注册，当满足计数要求时，它会生动并使用实际的处理程序代码处理您的点击。（您可以添加处理程序而不是打印点击次数）

＆＃13;

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;
      }
     }
  });
};

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

禁用按钮，直到达到数字

5 个答案: