点击按钮增加计数

时间:2011-04-20 21:28:03

标签: javascript html

var index = 0;

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

6 个答案:

答案 0 :(得分:5)

您的问题尚不清楚,但我认为您正在寻找类似的内容......

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

答案 1 :(得分:5)

你需要一个功能来做到这一点:

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 has a good series of articles

答案 2 :(得分:4)

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

答案 3 :(得分:2)

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

演示:

http://gsvolt.no-ip.org/buttoncount.html

答案 4 :(得分:1)

正如@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!"/>

答案 5 :(得分:0)

这可能是您要寻找的。

https://codepen.io/anon/pen/oPLVdE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button>Generate</button> <br><br>
  <div id="content"></div>
  <div id="content2"></div>

</body>