CODEWITHSUNDEEP
javascripthtml
John Higgins
John Higgins

Reputation: 907

Display real time results in input box

I am trying to display the results of an input in real time in another disabled input box and am not having much luck. Code below:

var inputBox = document.getElementById('input');

inputBox.onkeyup = function(){
    document.getElementById('output').innerHTML = inputBox.value*2;
}

<input type='text' id='input'>

<input type='text' id='output' disabled>

Can anyone help?

Thanks,

John

Upvotes: 0

Views: 3508

Answers (3)

deviantxdes
deviantxdes

Reputation: 479

Use the 'keyup' as it is fired after the char is entered.

$("#input").keyup (function (e) {
     $('#output').val($(this).val() * 2);
});

Upvotes: 0

Chetan
Chetan

Reputation: 942

Try This one - 

var inputBox = document.getElementById('input');

inputBox.onkeyup = function(){
    document.getElementById('output').innerHTML = inputBox.value*2;
   var val = document.getElementById('input').value
  document.getElementById('output').value = val;
}
<input type='text' id='input'>

<input type='text' id='output' disabled>

Upvotes: 0

Kingsthor
Kingsthor

Reputation: 180

Try adding a listener and use value instead of innerHTML: 

document.getElementById('input').addEventListener("keyup", myFunction);

var inputBox = document.getElementById('input');

function myFunction(){
    document.getElementById('output').value = inputBox.value*2;
}

JSfiddle: https://jsfiddle.net/22t37834/

Upvotes: 1

Related Questions