Question

I am building a dynamic small lenght converter that contains 3 input[text]s. Like so

<input type='text' class='bx' id='cm'> Centimeter<br>
<input type='text' class='bx' id='m'> Meter<br>
<input type='text' class='bx' id='km'> Kilometer<br>

The effect is the following: if you click on “Meter” the value becomes ” and if you type a value the “Centimeter” and “Kilometer” value will be equal to a value(…).

Example

The jquery is like so:

$(function() {

var selected = ????;

// do i need something here to empty the input it is focused on?

$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);

})

I want the var selected to be equal to the value of the text input it is focused on.

How can i do this?

The calculation in examples are informative.

Answer 1

var selected = $(this).val();

// // The code you have written will only work fro the first time your page loads. If you want it to work on every click of it you need to handle the focus event of the input..

 $('#cm , #km , #m').on('focus', function() {
        var selected = parseInt($(this).val() , 10) ; // Will convert to a Int

        $("#cm").val(selected * 545);
        $("#km").val(selected * 545);
        $("#m").val(selected * 453);

    });

But I think a blur event makes more sense here instead of a focus event..

FIDDLE

Which will point to the value of the selected input