点击按钮增加计数

Question

var index = 0;

通过defualt索引的值为0,现在我有两个按钮,当我点击按钮2或1时,索引的值应该增加.点击的第二个按钮应该取值一个...类似的第三个等等.

Answer 1

你的问题不清楚,但我认为你正在寻找这样的东西......

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

Answer 2

你需要一个函数来做到这一点:

function incrementIndex() {
    index += 1;
}

这假设您的index变量是全局变量.

接下来你需要做的就是等待click活动.在JavaScript中有三种方法可以做到这一点.

1. 内联JavaScript

   <button onclick="incrementIndex()">Button 1</button>
   <button onclick="incrementIndex()">Button 2</button>
   

   这就是希特勒开发网站的方式.不要这样做.

2. 事件处理程序

   这需要你等到DOM加载,然后以某种方式"获取"你的两个按钮.如果页面上只有两个按钮,则可以执行以下操作(但仅当此脚本位于文档中的HTML 之后):

   var buttons = document.getElementsByTagName('button');
   buttons[0].onclick = buttons[1].onclick = incrementIndex;
   

   请注意,在该示例中,末尾没有括号.()incrementIndex

3. 事件监听器

   事件处理程序的问题是您一次只能附加一个函数.如果您要使用其他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有很多关于它的文章.