10次点击后如何禁用输入属性？答案

【问题标题】：How to disable input attribute after 10 clicks?10次点击后如何禁用输入属性？
【发布时间】：2012-12-03 15:18:00
【问题描述】：

我正在尝试删除文本框的样式或背景以在单击 10 次后显示内容。我怎样才能在 Javascript 上做到这一点？

这是我的html：

<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000">

这是我的 JS：

 function check() {

    var tries++;

    if (tries == 10){
        document.getElementById('firstN').disabled= true;
    }
}

【问题讨论】：

你在每次函数执行时重新定义那个变量，所以它永远不会超过1。定义 tries 函数外：var tries = 0;，然后是 check() 函数内的简单 tries++;。
document.getElementById('firstN').disabled=true;似乎不起作用。当我将其更改为 alert('blahblah') 时，它起作用了。似乎它能够计算点击次数
@user1893388 请记住接受这个问题的正确答案:)

标签： javascript input disabled-input

【解决方案1】：

问题在于tries 是一个局部变量（check 函数的局部变量）。每次调用check，都会创建一个名为tries的新变量，并将其初始化为0。

试试这个：

var tries = 0;
function check() {
  tries++;
  if (tries == 10) {
    document.getElementById('firstN').style.background = '#ffffff';
  }
}

（我假设您已经有一些代码可以在单击元素时调用check。如果没有，您需要在元素中添加click handler。）

【讨论】：

感谢您的回复，我已经尝试了您的建议，但没有成功。这是来自 html 部分：我试图在点击 10 次后禁用该样式，是的，我有调用 check() 的代码
document.getElementById('firstN').disabled=true;似乎不起作用。当我将其更改为 alert('blahblah') 时，它起作用了。似乎它能够计算点击次数
您要更改文本的颜色？然后禁用不是您想要的...尝试document.getElementById('firstN').style.color = '#ffffff'或document.getElementById('firstN').style.background = '#ffffff'。
没问题。 :) 如果有机会，您介意接受答案吗？
是的，当然。一旦我完成了 15 次重复 :)

【解决方案2】：

每次进入此函数时，您都在实例化一个 var“尝试”。将变量向上移动到将要递增的级别：

var btn = document.getElementById("btnclick");
btn.onclick = check;
var tries = 0;
function check() {

    tries++;

    if (tries == 10){
        var ele = document.getElementById("firstN");
        ele.value= "DISABLED";

        ele.disabled = true;
    }
}

编辑：

工作JSFiddle

【讨论】：

document.getElementById('firstN').disabled=true;似乎不起作用。当我将其更改为 alert('blahblah') 时，它起作用了。似乎它能够计算点击次数。
@user1893388 我用你需要的东西更新了这篇文章。希望它对你有用！

【解决方案3】：

将其存储在 cookie 中：

<script type="text/javascript">var clicks = 0;</script>
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" value="Click" onclick="clicks++">

onclick="$.cookie('clicks', $.cookie('clicks') + 1);"

【讨论】：

这里真的不需要 cookie。
我猜你是对的。这将更好地优化页面到页面计数
为什么会被否决？对于任何需要它的人来说，我仍然认为这是一个很好的答案，因为显而易见的原因是基于 cookie。
我知道，但仍然是悲伤的脸

【解决方案4】：

给你。当您看到它有效时删除警告行。

<html>
<head>
    <title>Test</title>

    <script>
 function check(){

    var getClicks = parseInt(document.getElementById('firstN').getAttribute('clicks')); //Get Old value

    document.getElementById('firstN').setAttribute("clicks", 1 + getClicks); //Add 1

    if (getClicks === 10){ //Check
        alert('Locked');
        document.getElementById('firstN').disabled= true;
    } else {
        alert(getClicks); //Remove else statement when you see it works.
    }

}

    </script>
</head>
<body>

<form action="#">
    Input Box: <input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" onclick="check();" clicks="0">
    <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

【讨论】：