How to update javascript variable value in html without a page refresh

Question

I am collecting a text area value(number in decimal ) using its id to a javascript variable, adding another variable value (number in decimal), and displaying the result in same html page

text area code:

<div class="input-resp"><span><input  class="textbox" id="num" name="count" type="text" size="5" maxlength="3"  value="" /></span></div>

passing value to var and adding it to another var

var a = document.getElementById('num').value;
var b = 1000;
var c = parseFloat(a) + parseFloat(b);

passing var c to div id test

document.getElementById("test").innerHTML = c;

html for test id

<div id="test"></div>

But here, whenever I am updating the text area with new number, the final output is not updating instantly.I have refresh the page manually to get new value. Is there anyway I update the value without a page refresh ?

Where is your jQuery and where did you define the variable data? And further more.. how are you doing this? With a click event? — putvande
– putvande, Commented Jul 27, 2013 at 17:05
@putvande : 'data' was a typo.variables are a,b and c.there is no click,iwould like to update the value whenever I type in textarea — acr
– acr, Commented Jul 27, 2013 at 17:10

adeneo · Accepted Answer · 2013-07-27 17:13:36Z

3

If it's going to update whenever you type into the input, you need an event handler:

document.getElementById('num').onkeyup = function() {
    var a = 1000 + parseFloat(this.value);
    document.getElementById("test").innerHTML = a || 0;
}

FIDDLE

edited Jul 27, 2013 at 17:13

answered Jul 27, 2013 at 17:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

David Hellsing Over a year ago

Note that there is no need to parseFloat the 1000 number. Also note that this does not work on paste or any other inputs than keyboard, use appropriate event for your needs (the input event comes to mind).

adeneo Over a year ago

@David - the input event is not really widely supported

David Hellsing Over a year ago

agreed, but there are other ways to simulate it for older browsers, f.ex using setInterval. I’m just mentioning it in case the OP needs to care for pasters as well.

Collectives™ on Stack Overflow

How to update javascript variable value in html without a page refresh

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related