logo标签列表

点击按钮时计数增加

javascripthtml
4
var index = 0;

默认情况下，索引值为0，现在我有两个按钮，当我单击按钮1或2时，索引值应该增加。第二个按钮单击后应该从1开始取值... 同样的，第三个按钮以此类推。

6个回答
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>
5
你需要一个函数来实现这个功能：
function incrementIndex() {
    index += 1;
}

这假设你的index变量是全局的。
接下来，你需要等待click事件。在JavaScript中，有三种方法可以实现这一点。

  1. Inline JavaScript

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

    This is how Hitler developed websites. Don't do this.

  2. 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 after the HTML in your document):

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

    Note in that example that there are no parentheses () at the end of incrementIndex.

  3. 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 articles on it.

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>
2
<html>
<head>
<script type="text/javascript">
 var index = 0;
</script>
</head>
<body>
In response to <a href="https://dev59.com/k1bTa4cB1Zd3GeqP-mwn">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:

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

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!"/>
0

这可能是你正在寻找的内容。

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;
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接