Данные из input в реальном времени

289

20 ноября 2017, 21:51

Делаю небольшой конвертер величин.

Пользователь должен ввести в input`е интересующее его значение, а в ячейках справа должны отобразится значения в других единицах измерений.

Когда ввожу значение в поле и нажимаю на кнопку, чтобы произвелись расчёты, то показываются нули. Когда обновляю страницу, то число в поле остаётся, нажимаю далее на кнопку - и расчёты проводятся.

Почему конвертер не работает в режиме реального времени? И как мне лишить калькулятор такого рода недостатка?

<table id="tableCalc">
<tr>
    <td></td>
    <td>Киловатт-час</td>
    <td>Джоуль</td>
    <td>Килокалория</td>
</tr>
<tr>
    <td><p>Киловатт-час</p><input id="KH" type="text"></td>
    <td>1</td>
    <td id="KH_to_JL"></td>
    <td id="KH_to_CL"></td>
    <td><button id="calculation_KH">Рассчёт</button></td>
</tr>

var KH = document.getElementById("KH").value;
var KH_to_JL = KH * 3600000;
var KH_to_CL = KH * 859.8;
$("#calculation_KH").click(function() {
    $("#KH_to_JL").text(KH_to_JL);
    $("#KH_to_CL").text(KH_to_CL);
})

Answer 1

В вашем примере нужно сделать так если повешать на кнопку "Рассчёт". Если нужно сразу при вводе, смотрите пример выше по ссылки.

В примере используется jquery 2.1.1.

var KH = 0; 
var KH_to_JL = 0;  
var KH_to_CL = 0;  
 
$("#calculation_KH").click(function() { 
    KH = document.getElementById("KH").value; 
     
    KH_to_JL = KH * 3600000; 
    KH_to_CL = KH * 859.8; 
 
    $("#KH_to_JL").text(KH_to_JL); 
    $("#KH_to_CL").text(KH_to_CL); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="tableCalc"> 
<tr> 
    <td></td> 
    <td>Киловатт-час</td> 
    <td>Джоуль</td> 
    <td>Килокалория</td> 
</tr> 
<tr> 
    <td><p>Киловатт-час</p><input id="KH" type="text"></td> 
    <td>1</td> 
    <td id="KH_to_JL"></td> 
    <td id="KH_to_CL"></td> 
    <td><button id="calculation_KH">Рассчёт</button></td> 
</tr>