Increment input field value with jQuery

Question

I want every time when user enter number ,print the new one + old one in console

here is html script

 <input type="number"value=""/>
 <button>click</button>

my jquery code

$("button").click(function (){
    var x = $("input").val();
    x+=x;
    console.log(x);
});

Answer 1

You have to initialize the value outside somewhere to keep its state.

html

<input type="number" id="inp" value=""/>
<button>click</button>

js

var x = 0;

$("button").click(function (){
    var y = parseInt($("#inp").val());
    x+=y;
    console.log(x);
});

Answer 2

hope this will help to you. refer the working demo.

 var thevalue = 0; $("#click").click(function(){ $("#display").text("The Value is :"); var theinput_value = parseInt($("#num").val()); thevalue += theinput_value; $("#display").append(thevalue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Enter the nubmer : <input type="number" id="num"><button id="click">Click on me !</button> <br> <p id="display">The Value is :</p> 

Answer 3

Hello and welcome to the stackoverflow community.

You are trying to add the input to the variable x , but the first time your code is executed the value of x is "", an empty string.

Basically you are saying something like, hey javascript, what is 5+""?

If you run console.log(typeof (""+5)); the output is string . That means that you were intended to get a number and ended up with a string due to not initializing x .

Also, x is defined in the scope of the on click function. This means that after the function is executed there is no x at all, so when you click again and the function is executed again, x is created again.

In order to fix that, just declare x outside the scope of the function.

 var x = 0; $("button").click(function (){ // get the input value of the box var input_value = $("input").val(); // parse the value to an integer var number = parseInt(input_value) || 0; // add it to the existing value of x x = x + number; // show the results console.log(x + ' - ' + typeof x); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" value=""/> <button>click</button> 

Answer 4

You just need to make sure x is a global variable so you can save it's value and used each time the click handler is triggered.

I added input casting to avoid string concatenation when using the addition assignment operator .

var x = 0;     
$("button").click(function (){
     // Get the input
      var current_input = parseInt($("input").val());
     // If input is not a number set it to 0
      if (isNaN(current_input)) current_input = 0;
     // Add the input to x
      x+=current_input;
     // Display it
      console.log(x);
});