Question

<input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty" />
<div id="qtyvalue"><div>

There is an input text box on the page. I’m using Javascript to output the qtyvalue to the following div.

var qty =document.getElementById('qty').value;
document.getElementById('qtyvalue').innerHTML = qty;

Now, if the user enters a number in the text box, the value of qtyvalue will be changed accordingly, and I don’t need to refresh the page. How should I change the code?

Answer 1

Wrap it inside keyup event:

var input = document.getElementById('qty'); 
input.onkeyup = function() {
    document.getElementById('qtyvalue').innerHTML = input.value;    
}

But you should consider adding the same action on other events also: change, paste, input.

Working example here