Geek Answers Handbook

Increase button clicks

var index = 0;

By defualt, the index value is 0, and now I have two buttons, when I press the 2 or 1 button, the index value should increase. the second button on the click should take the value one forward ... similar to the third, etc. etc.

+4
source share
5 answers

You will need a function for this:

 function incrementIndex() { index += 1; }

This assumes your index variable is global.

Next you need to wait for the click event. There are three ways to do this in JavaScript.

  • Inline javascript

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

    This is how Hitler designed websites. Do not do that.

  • Event handler

    This requires you to wait for the DOM to load, and then “get” your two buttons. If the page has only two buttons, you can do something like this (but only if this script appears after the HTML in your document):

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

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

  • Event listener

    The problem with event handlers is that you can only attach one function at a time. If you want other JavaScript to listen for button presses, you will need to use event listeners.

    But event listeners are the main pain in the butt, because IE6-8 is doing it wrong, and (depending on the project), you probably have to code around it. Here's a simple one, 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);

    It is just a listening surface through a cross browser. If you want to know more, QuirksMode has a good series of articles on it.

+5
source

Your question is not clear, but I think you are 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>
+5
source 
 <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>
+4
source 
 <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 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

+2
source

As @Brandon said, the question is not entirely clear. As far as I understand, you are asking for something like this. I'm right? It is hard-coded, but I wanted to make sure I understood your question.

 <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!"/>
+1
source

More articles:


All Articles