Is it possible to diable a button after it has been clicked 5 times?

Question

After a user clicks the button five times, I want the button to become disabled.

Is it possible to just do in html, or would I need to use javascript?

Answer 1

First of all you can give every button a data-clicks attribute. which contains the number of clicks for this button.

Every time the user click any button check data-clicks attribute value if it equals 5. then disable the button. else just increase the number stored in data-clicks

Example

You can only click 5 times for every button, after that the button will be disabled

 let btns = document.querySelectorAll(".my-btn"), btn = null; for (let i = 0; i < btns.length; i += 1) { btns[i].onclick = function () { this.setAttribute('data-clicks', Number(this.getAttribute('data-clicks')) + 1) if (this.getAttribute('data-clicks') === '5') { this.setAttribute('disabled', 'disabled'); } } } 

 <input type="button" class="my-btn" value="button 1" data-clicks="0"> <input type="button" class="my-btn" value="button 2" data-clicks="0"> <input type="button" class="my-btn" value="button 3" data-clicks="0"> <input type="button" class="my-btn" value="button 4" data-clicks="0"> <input type="button" class="my-btn" value="button 5" data-clicks="0"> 

I removed the array because there is no need for it. also without it will work dynamically with your html buttons. you can easily remove or add buttons without any edits for your JavaScript code

UPDATE

for your jsfiddle you can embed my code in your myno function like this https://jsfiddle.net/bhoLbu8x/5/

Answer 2

Hope this gives you some idea:

var h = [2, 4, 6, 3, 4, 2, 7];
var button = document.getElementsByTagName('button');
var placementOfValueReaches5 = [];

h.forEach(function(value, index){
    if (value >= 5){
        button[index].setAttribute('disabled', true);
        placementOfValueReaches5.push(index);
    }
});

console.log(placementOfValueReaches5);  // outputs [2, 6]

More information of Array.prototype.forEach here .