CODEWITHSUNDEEP
javascripthtml
theJava
theJava

Reputation: 15034

incrementing the count on click of button

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.

Upvotes: 4

Views: 27768

Answers (6)

parag patel
parag patel

Reputation: 3283

this might be what you are looking for.

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;
})

Upvotes: 0

LP.
LP.

Reputation: 98

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.

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

Upvotes: 1

sdleihssirhc
sdleihssirhc

Reputation: 42496

You're going to need a function to do that:

function incrementIndex() {
    index += 1;
}

This assumes that your index variable is global.

Next what you'll need to do is wait for the click event. There are three ways to do that in 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.

Upvotes: 5

gsvolt
gsvolt

Reputation: 182

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

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

Upvotes: 2

John Hartsock
John Hartsock

Reputation: 86882

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

Upvotes: 4

Brandon McKinney
Brandon McKinney

Reputation: 1412

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>

Upvotes: 5

Related Questions