如何在js中点击x次后禁用按钮？

Question

我正在尝试使用 Javascript 在单击按钮 x 次后禁用该按钮。为了简单起见，现在假设 x = 2。我似乎无法让计数器增加。谢谢您的帮助！

var $ = function (id) {
    return document.getElementById(id);
}

window.onload = function () {
    coke.onclick = function(){
        var count =0;
        if (count >= 1)
        {
            coke.disabled = true;
        }
        else
            count++;
    };
}

其中“coke”是元素 ID。如果我去掉

if

语句并只有

coke.disabled = true

，当然它会在单击后起作用并禁用。我确信我缺少一个核心概念。谢谢你

Answer 1

发生这种情况是因为每次触发

onclick

事件时，您的

var count

都会被分配为 0，因此它在函数中永远不会大于或等于 1。如果您在

count

函数之外初始化

onclick

var，它将按预期运行。

window.onload = function () {
   var count = 0;
   coke.onclick = function(){
       if (count >= 1)
       {
           coke.disabled = true;
       }
       else
           count++;
   };
}

Answer 2

您需要在

count

函数范围之外定义

onclick

：

var $ = function (id) {
    return document.getElementById(id);
}
var count = 0;    // set initial count to 0
window.onload = function () {
    coke.onclick = function(){
        if (count >= 1)
        {
            coke.disabled = true;
        }
        else
            count++;
    };
}

Answer 3

let count =0;

let add = document.getElementById('btn-add');
let sub = document.getElementById('btn-sub');
let counter = document.getElementById('div-cls');

add.addEventListener('click',()=>{
   
    if (count >= 10) {
        add.disabled = true;
    } else {
        count++;
    }

    counter.innerHTML = count;
})
sub.addEventListener('click',()=>{
    if(count <=-10){
        sub.disabled=true;
    }
    else{
        count--;
    }
    
    counter.innerHTML = count;
})

console.log(counter);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button id="btn-add">Add</button>
    <div id="div-cls">0</div>
    <button id="btn-sub">Subtract</button>

    <script src="script.js"></script>
</body>
</html>

如何在js中点击x次后禁用按钮？

问题描述投票：0回答：3

3个回答

最新问题

如何在js中点击x次后禁用按钮？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3