如何使用按钮按下事件增加 JavaScript 变量答案

【问题标题】：How to increment a JavaScript variable using a button press event如何使用按钮按下事件增加 JavaScript 变量
【发布时间】：2009-05-08 00:07:26
【问题描述】：

我可以创建一个 javascript 变量并在我按下按钮时增加该变量（而不是提交表单）。谢谢！

【问题讨论】：

这个问题的标题应该是“如何根据网页按钮按下事件增加 JavaScript 变量”。
@Parappa 你应该已经编辑过了

标签： javascript

【解决方案1】：

是的：

<script type="text/javascript">
var counter = 0;
</script>

和

<button onclick="counter++">Increment</button>

【讨论】：

我正在输入它，当你发布它时。
你有一个打开的输入标签和一个关闭按钮标签。

【解决方案2】：

执行此操作的最纯粹方法是将事件处理程序添加到按钮，而不是将行为与内容混合（LSM，分层语义标记）

<input type="button" value="Increment" id="increment"/>

<script type="text/javascript">
    var count = 0;
    // JQuery way
    $('#increment').click(function (e) {
        e.preventDefault();
        count++;
    });
    // YUI way
    YAHOO.util.Event.on('increment', 'click', function (e) {
        YAHOO.util.Event.preventDefault(e);
        count++;
    });
    // Simple way
    document.getElementById('increment').onclick = function (e) {
        count++;
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false;
    };
</script>

【讨论】：

按钮没有默认操作，因此您无需阻止它。

【解决方案3】：

<script type="text/javascript">
var i=0;

function increase()
{
    i++;
    return false;
}</script><input type="button" onclick="increase();">

【讨论】：

哦，当然，使用漂亮的函数调用。 :)
在函数或onclick事件中声明“return false”时，不会发布表单。
它会将表单发布为按钮而不是提交吗？
A button 不提交表单。 submit 确实如此。
另外，要使函数中的return false有任何效果，还需要onclick="return increase();"。

【解决方案4】：

我需要查看此脚本的结果，并且能够通过合并以下内容来做到这一点：

var i=0;

function increase()
{
i++;
document.getElementById('boldstuff').innerHTML= +i;
}

<p>var = <b id="boldstuff">0</b></p>
<input type="button" onclick="increase();">

首先添加“脚本”标签，并在函数结束大括号下方添加一个结束脚本标签。当我尝试它时，返回 false 导致 Firefox 挂起。根据我的经验，所有其他解决方案都没有显示增量的结果。

【讨论】：

【解决方案5】：

使用type = "button" 代替"submit"，然后为其添加onClick 处理程序。

例如：

<input type="button" value="Increment" onClick="myVar++;" />

【讨论】：

@rgz 不错的标签。不知道。

【解决方案6】：

是的。

<head>
<script type='javascript'>
var x = 0;
</script>
</head>
<body>
  <input type='button' onclick='x++;'/>
</body>

[伪代码，上帝希望这是对的。]

【讨论】：

【解决方案7】：

是的，假设您的变量在全局命名空间中：

<button onclick="myVar += 1;alert('myVar now equals ' + myVar)">Increment!!</button>

【讨论】：

【解决方案8】：

我相信你需要类似以下的东西：

<script type="text/javascript">
var count;
function increment(){
    count++;
}
</script>

...

和

<input type="button" onClick="increment()" value="Increment"/>

或

<input type="button" onClick="count++" value="Increment"/>

【讨论】：

【解决方案9】：

遇到了类似的问题。需要将用户想要的尽可能多的文本输入附加到表单中。它使用 jQuery 的功能是问题的答案：

<div id='inputdiv'>
<button id='mybutton'>add an input</button>
</div>

<script>
var thecounter=0; //declare and initialize the counter outside of the function
$('#mybutton').on('click', function(){
thecounter++;
$('#inputdiv').append('<input id="input'+thecounter+'" type="text/>);
});
</script>

将计数添加到每个新的输入 id 会产生唯一的 id，这使您可以使用 jQuery serialize() 函数获取所有值。

【讨论】：