Javascript update/increment variable value on click

Question

I have this following code: JS Fiddle

<html>
    <head>
        <script>            
            function increase(){
                var a = 1;
                var textBox = document.getElementById("text");
                textBox.value = a;
                a++;
            }            
        </script>
    </head>

    <body>
        <button type="button" onclick="increase()">show</button>
        <input type="text" id="text">
    </body>
</html>

What I am trying to do is:

On clicking the button the value of 'a' will be displayed in the textbox and 'a' will be incremented.
On clicking again now the incremented value should be displayed but this doesn't happen.

Where am I going wrong?

Denys Séguret · Accepted Answer · 2012-11-06 11:00:17Z

13

You're only incrementing a local variable that goes away at end of function. You may do this :

      var a = 1;
      function increase(){
            var textBox = document.getElementById("text");
            textBox.value = a;
            a++;
      }

answered Nov 6, 2012 at 11:00

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Dvorak Over a year ago

+1; note that polluting the global namespace is not recommended. You can avoid a global variable by using a self-invoking function.

Martin Over a year ago

how to maintain the incremented value in var a .

Angus Over a year ago

does this add the increment at the end of the function??

karaxuna · Accepted Answer · 2019-01-12 17:57:27Z

8

<input type="text" id="text" value="1"/>

function increase(){
    var textBox = document.getElementById("text");
    textBox.value++;
}

edited Jan 12, 2019 at 17:57

answered Nov 6, 2012 at 11:00

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

1 Comment

Avnish Tiwary Over a year ago

shorter way.. liked that.. +1 for this

Sentencio · Accepted Answer · 2012-11-06 11:02:33Z

0

It's better to check the value of your text field. If it is empty a=1 else textfield.value++

answered Nov 6, 2012 at 11:02

Sentencio

2301 silver badge13 bronze badges

Comments

Ghostman · Accepted Answer · 2012-11-06 11:03:22Z

0

i meant var a=1; should be declared before the function

answered Nov 6, 2012 at 11:03

Ghostman

6,1129 gold badges36 silver badges53 bronze badges

1 Comment

John Dvorak Over a year ago

"you need a++" and "var a=1; should be declared before the function" don't seem very similar.

polin · Accepted Answer · 2012-11-06 11:04:02Z

0

you can use this.Just copy and paste

    <html>
    <head>
        <script type="text/javascript">  
        var a = 1;          
            function increase(){


                document.getElementById("text").value=a;
                a=a+1;

            }            
        </script>
    </head>

    <body>
        <button type="button" onclick="increase()">show</button>
        <input type="text" id="text">
    </body>
</html>

answered Nov 6, 2012 at 11:04

polin

2,8853 gold badges17 silver badges20 bronze badges

Comments

shashi · Accepted Answer · 2014-02-10 09:36:18Z

0

use this code

    var k = 1;
    function shashi() {
        document.getElementById('para').innerHTML = k;
        k++;
    }
    k = k;
</script><br/>

and call shashi() function on click event

answered Feb 10, 2014 at 9:36

shashi

10810 bronze badges

Comments

Avnish Tiwary · Accepted Answer · 2019-05-18 10:24:59Z

0

You should practice not to declare global variables until it necessary. It leads a hole in big applications sometime. JS functions are also objects that means they can have properties.

<html>
    <head>
        <script>            
            function increase(){
                if( typeof this.counter == 'undefined' ) {
					        this.counter = 1;
				        }
				
                var textBox = document.getElementById("text");
                textBox.value = this.counter;
                this.counter++;
            }            
        </script>
    </head>

    <body>
        <button type="button" onclick="increase()">show</button>
        <input type="text" id="text">
    </body>
</html>

edited May 18, 2019 at 10:24

answered May 18, 2019 at 9:45

Avnish Tiwary

2,28823 silver badges27 bronze badges

Comments

Abdullah al fahim · Accepted Answer · 2021-01-27 06:04:06Z

0

 <input type="text" id="text" value="1" />
<p id="plus">+</p>
<script>
    const plus = document.getElementById('plus');
    plus.addEventListener('click', function() {
        var textBox = document.getElementById("text").value;
        let inputNumber = parseFloat(textBox);
        console.log(inputNumber);
        inputNumber += 1;
        document.getElementById("text").value = inputNumber;
    })
</script>

answered Jan 27, 2021 at 6:04

Abdullah al fahim

12 bronze badges

1 Comment

Ran Marciano Over a year ago

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes

Wellwisher · Accepted Answer · 2021-05-30 03:56:22Z

0

You have put on quotes before & after the function increase() in the button coding too

answered May 30, 2021 at 3:56

Wellwisher

1

1 Comment

Yunnosch Over a year ago

I am unclear what you mean. Either "... but you should not. See this code how to avoid it." or "You have to put on ...". Maybe if you add either code or an explanation of what is wrong, why, how to solve it and how that works, then things might be clearer.

Jonathan Argentiero · Accepted Answer · 2016-08-17 12:30:18Z

-1

You have a simpler approach implementing increment and decrement buttons. Quick example using inline javascript:

<!-- increment button -->
<input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<!-- quantity input -->
<input name='qty' id='qty' style="text-align:center;" type="text" value="1"  autocomplete="off" size="2">
<!-- decrement button -->
<input type='button' name='subtract' onclick='javascript: document.getElementById("qty").value--;' value='-'/>

edited Aug 17, 2016 at 12:30

Jonathan Argentiero

5,7478 gold badges32 silver badges34 bronze badges

answered Aug 17, 2016 at 9:44

Harshit Chaturvedi

135 bronze badges

Collectives™ on Stack Overflow

Javascript update/increment variable value on click

10 Answers 10

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related