Javascript update/increment variable value on click

P

10

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?

Pile answered 6/11, 2012 at 10:58 Comment(0)

C

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

Cockle answered 6/11, 2012 at 11:0 Comment(3)

+1; note that polluting the global namespace is not recommended. You can avoid a global variable by using a self-invoking function. – Extranuclear 6/11, 2012 at 11:3

how to maintain the incremented value in var a . – Culminate 3/9, 2015 at 10:3

does this add the increment at the end of the function?? – Derisive 26/2, 2017 at 21:16

T

8

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

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

Tetra answered 6/11, 2012 at 11:0 Comment(1)

shorter way.. liked that.. +1 for this – Tarsal 18/5, 2019 at 9:22

F

0

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

Firing answered 6/11, 2012 at 11:2 Comment(0)

F

0

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

Frawley answered 6/11, 2012 at 11:3 Comment(1)

"you need a++" and "var a=1; should be declared before the function" don't seem very similar. – Extranuclear 6/11, 2012 at 11:7

B

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>

Bridgettbridgette answered 6/11, 2012 at 11:4 Comment(0)

D

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

Dopester answered 10/2, 2014 at 9:36 Comment(0)

T

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>

Tarsal answered 18/5, 2019 at 9:45 Comment(0)

D

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>

Downspout answered 27/1, 2021 at 6:4 Comment(1)

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 – Toland 27/1, 2021 at 6:10

T

0

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

Tumulus answered 30/5, 2021 at 3:56 Comment(1)

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. – Scutch 30/5, 2021 at 4:42

M

-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='-'/>

Marje answered 17/8, 2016 at 9:44 Comment(0)

Recommended topics

Hot tags