Javascript калькулятор, как пользователи набирают числа

Question

Я ноб в Javascript, но я пытаюсь реализовать что-то на своем веб-сайте, где пользователи могут вводить количество, а субтотал обновляется динамически по мере их ввода. Например: если предметы составляют 10 долларов каждый, а пользователь вводит 5 в текстовом поле, я бы хотел, чтобы он показывал 50 долларов рядом с текстовым полем. Довольно простое умножение, но я не знаю, как это сделать с помощью Javascript. Я думаю, чтоKeyPress как-то? Благодаря!

Answer 1

Предполагая, что следующий HTML:

<input type="text" id="numberField"/> 
<span id="result"></span> 

JavaScript:

window.onload = function() { 
    var base = 10; 
    var numberField = document.getElementById('numberField'); 
    numberField.onkeyup = numberField.onpaste = function() { 
     if(this.value.length == 0) { 
     document.getElementById('result').innerHTML = ''; 
     return; 
     } 
     var number = parseInt(this.value); 
     if(isNaN(number)) return; 
     document.getElementById('result').innerHTML = number * base; 
    }; 
    numberField.onkeyup(); //could just as easily have been onpaste(); 
}; 

Вот working example.

Answer 2

Вы должны обрабатывать события «onkeyup» и «onpaste», чтобы обеспечить захват изменений с клавиатуры и с помощью событий вставки в буфер обмена.

<input id='myinput' /> 
<script> 
    var myinput = document.getElementById('myinput'); 
    function changeHandler() { 
    // here, you can access the input value with 'myinput.value' or 'this.value' 
    } 
    myinput.onkeyup = myinput.onpaste = changeHandler; 
</script> 

Аналогично, используйте getElementById и атрибут элемента innerHTML установить содержимое элемента, если вы хотите, чтобы показать результат.