单击5次后是否可以禁用按钮?

问题描述 投票:0回答:2

用户单击该按钮五次后,我希望该按钮被禁用。

是可以只用html做,还是我需要使用javascript?

javascript html html5
2个回答
1
投票

首先,你可以给每个按钮一个data-clicks属性。其中包含此按钮的点击次数。

每次用户单击任何按钮时,如果它等于5,则检查data-clicks属性值。然后禁用该按钮。否则只是增加存储在data-clicks中的数字

每个按钮只能单击5次,之后按钮将被禁用

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

我删除了数组,因为没有必要。也没有它将动态使用您的HTML按钮。您可以轻松删除或添加按钮,而无需对JavaScript代码进行任何编辑

UPDATE

对于你的jsfiddle,你可以将我的代码嵌入你的myno函数,就像这个https://jsfiddle.net/bhoLbu8x/5/


1
投票

希望这会给你一些想法:

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]

Array.prototype.forEach here的更多信息。

© www.soinside.com 2019 - 2024. All rights reserved.