Javascript 单击按钮时增加计数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5736860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
incrementing the count on click of button
提问by theJava
var index = 0;
By defualt the value of index is 0 and now i have two buttons, when i click on button 2 or 1, the value of index should get incremented. the second button on click should take the value one onwards... similarly third etc etc.
默认索引的值为 0，现在我有两个按钮，当我点击按钮 2 或 1 时，索引的值应该增加。单击时的第二个按钮应该取值一......类似的第三个等等。
回答by Brandon McKinney
Your question is unclear, but I think you're looking for something like this...
你的问题不清楚，但我认为你正在寻找这样的东西......
<script type="text/javascript">
index = 0;
increment = function(){ index++; }
</script>
<button name="button1" onclick="increment();">Button 1</button>
<button name="button2" onclick="increment();">Button 2</button>
回答by sdleihssirhc
You're going to need a function to do that:
你将需要一个函数来做到这一点：
function incrementIndex() {
index += 1;
}
This assumes that your indexvariable is global.
这假设您的index变量是全局的。
Next what you'll need to do is wait for the clickevent. There are three ways to do that in JavaScript.
接下来您需要做的是等待click事件。在 JavaScript 中有三种方法可以做到这一点。
Inline JavaScript
<button onclick="incrementIndex()">Button 1</button> <button onclick="incrementIndex()">Button 2</button>This is how Hitler developed websites. Don't do this.
Event Handler
This requires you to wait until the DOM has loaded, and then "get" your two buttons somehow. If you only have two buttons on the page, you can do something like this (but only if this script comes afterthe HTML in your document):
var buttons = document.getElementsByTagName('button'); buttons[0].onclick = buttons[1].onclick = incrementIndex;Note in that example that there are noparentheses
()at the end ofincrementIndex.Event Listener
The problem with event handlers is that you can only attach one function at a time. If you're going to have other JavaScript listening for button clicks, you'll have to use event listeners.
But event listeners are a major pain in the butt because IE6-8 does it wrong, and (depending on the project) you'll probably have to code around it. At it's simplest, here's how to add an event listener in most browsers:
var addEvent = window.addEventListener ? function (elem, type, method) { elem.addEventListener(type, method, false); } : function (elem, type, method) { elem.attachEvent('on' + type, method); }; addEvent(buttons[0], 'click', incrementIndex); addEvent(buttons[1], 'click', incrementIndex);That is just the surface of cross-browser event listening. If you want to learn more, QuirksMode has a good series of articleson it.
内联 JavaScript
<button onclick="incrementIndex()">Button 1</button> <button onclick="incrementIndex()">Button 2</button>这就是希特勒开发网站的方式。不要这样做。
事件处理程序
这需要您等到 DOM 加载完毕，然后以某种方式“获取”您的两个按钮。如果页面上只有两个按钮，则可以执行以下操作（但前提是此脚本位于文档中的 HTML之后）：
var buttons = document.getElementsByTagName('button'); buttons[0].onclick = buttons[1].onclick = incrementIndex;注意在该示例中，有没有括号
()的结束incrementIndex。事件监听器
事件处理程序的问题在于您一次只能附加一个函数。如果要让其他 JavaScript 侦听按钮点击，则必须使用事件侦听器。
但是事件监听器是一个主要的痛点，因为 IE6-8 做错了，并且（取决于项目）你可能不得不围绕它编码。最简单的是，以下是在大多数浏览器中添加事件侦听器的方法：
var addEvent = window.addEventListener ? function (elem, type, method) { elem.addEventListener(type, method, false); } : function (elem, type, method) { elem.attachEvent('on' + type, method); }; addEvent(buttons[0], 'click', incrementIndex); addEvent(buttons[1], 'click', incrementIndex);这只是跨浏览器事件监听的表面。如果你想了解更多，QuirksMode 有一个很好的系列文章。
回答by John Hartsock
<html>
<head>
<script type="text/javascript">
var index = 0;
</script>
</head>
<body>
<button id="button1" onclick="index=index + 1;">1</button>
<button id="button2" onclick="index=index + 1;">2</button>
</body>
</html>
回答by gsvolt
<html>
<head>
<script type="text/javascript">
var index = 0;
</script>
</head>
<body>
In response to <a href="http://stackoverflow.com/questions/5736860/incrementing-the-count-on-click-of-button">theJava's question at StackOverflow</a>
<button onclick="index = index + 1;document.getElementById('tb').value = index;">Button1</button>
<button onclick="index = index + 1;document.getElementById('tb').value=index;">Button2</button>
<input type="text" id="tb"/>
</body>
</html>
Demo:
演示：
回答by LP.
As @Brandon said, the question isn't really clear. For all I can understand, you are asking for something like this. Am I right? It is hardcoded but I wanted to be sure I understood your question.
正如@Brandon 所说，这个问题并不是很清楚。据我所知，你是在要求这样的事情。我对吗？它是硬编码的，但我想确定我理解你的问题。
<script type="text/javascript">
var index = 0;
function increment(var1)
{
index++;
if(var1 == 1)
{ document.getElementById('button1').value=index; }
else
{ document.getElementById('button2').value=index; }
}
</script>
<input type="button" id="button1" onclick="increment(1)" value="increment me!"/>
<input type="button" id="button2" onclick="increment(2)" value="increment me!"/>
回答by parag patel
this might be what you are looking for.
这可能就是你要找的。
https://codepen.io/anon/pen/oPLVdE
https://codepen.io/anon/pen/oPLVdE
document.getElementById('btn').addEventListener('click', function(){
var i = document.getElementById("like").innerHTML;
i++;
document.getElementById("like").innerHTML = i;
})
document.getElementById('btn2').addEventListener('click', function(){
var i = document.getElementById("like").innerHTML;
i++
document.getElementById("like").innerHTML = i;
})
