Отключить кнопку до достижения номера

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

Если кнопка отключена, пользователь не может взаимодействовать с ним. Попробуйте следующее

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 2

Вы могли бы попробовать что-то вроде этого:

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