Change div on input (live & pass variable)

Question

I want a div that shows your input, but for example * 2.

I also want it to happen as you type. So it has to be 'live'.

I found a lot of 'on keyup' jquery functions but I need to change the 'variable' that is typed in the input field.

So for example:

<input id="input" /> (types 4)

<div class="showinputhere"> (shows 8) </div>

How do I do this, it has to happen immediately when you type.

Answer 1

Use this

$(document).ready(function()
    $('input').keyup(function(){
        $('.showinputhere').html(parseInt($(this).val(),10) *2);
    });
});

JSFiddle -> http://jsfiddle.net/gLExt/

Answer 2

try the following code:

 <script>
 function calVal(inputVal){
        var input = document.getElementById("input");
        var div = document.getElementsByClassName("showinputhere");
        div = div[0];
        div.innerHTML = inputVal * 2 == 0 ? "" : inputVal * 2;
    }
</script>

And call the function "onkeyup" event of input like this:

  <input id="input" onkeyup="calVal(this.value);"/> 

Answer 3

var input = document.getElementById("input");
var div = document.getElementsByClassName("showinputhere");
div = div[0];
input.addEventListener("change", function() {
    div.innerHTML = this.value * 2;
})

That's untested, but might work. Here's an edited version using keyup, because I've been informed that change does not auto-update.

var input = document.getElementById("input");
var div = document.getElementsByClassName("showinputhere");
div = div[0];
input.addEventListener("keyup", function() {
    div.innerHTML = this.value * 2;
})