Как рассчитать два поля ввода и получить общее отображение в элементе ввода - PullRequest
Новая
       28

Как рассчитать два поля ввода и получить общее отображение в элементе ввода

0 голосов
/ 29 сентября 2018

Я пытаюсь умножить два поля ввода и отобразить результат в общем элементе ввода.Может кто-нибудь сказать мне, где моя проблема в этом коде: 

var amount = document.getElementById("amount").value;
var amount = parseInt(amount, 10);
var quantity = document.getElementById("quantity").value;
var quantity = parseInt(quantity, 10);
var total = amount * quantity;
document.getElementById("total").innerHTML = total;
Amount: <input type="number" id="amount" name="amount">
<br> Quantity: <input type="number" id="quantity" name="quantity">
<br> Total: <input type="number" id="total" name="total">

Ответы [ 3 ]

0 голосов
/ 29 сентября 2018

Возможно, вам нужно привязать событие либо к кнопке (щелчок), либо к элементам ввода (вход)

В этом примере кнопка запускает расчет.

Вот следующие настройки:

  1. Используйте атрибут .value для элементов формы ввода.
  2. Используйте объект Number или знак плюс + для преобразования вчисло.
  3. Проверка введенных значений (это ваше дело). 

document.getElementById('calculate').addEventListener('click', function() {
  var amount = document.getElementById("amount").value;
  var amount = +amount;
  var quantity = document.getElementById("quantity").value;
  var quantity = +quantity;
  var total = amount * quantity;
  document.getElementById("total").value = total;
});
Amount: <input type="number" id="amount" name="amount">
<br> Quantity: <input type="number" id="quantity" name="quantity">
<br>
<br> <input id='calculate' type='button' value='Calculate'>
<br>
<br> Total: <input type="number" id="total" name="total">
0 голосов
/ 29 сентября 2018

Вы должны добавить функцию и вызывать ее при изменении ввода, поэтому попробуйте использовать событие oninput и измените document.getElementById("total").innerHTML = total; на document.getElementById("total").value = total;

<html><head></head><body>
Amount: <input type="number" oninput="calculate()" id="amount" name="amount">
<br>
Quantity: <input type="number" oninput="calculate()" id="quantity" name="quantity">
<br>
Total: <input type="number" id="total" name="total">

    
	<script>
		function calculate(){
			var amount = document.getElementById("amount").value;
			var amount = parseInt(amount, 10);
			var quantity = document.getElementById("quantity").value;
			var quantity = parseInt(quantity, 10);
			var total = amount * quantity;
			document.getElementById("total").value = total;
		}
	</script>
</body>
</html>
0 голосов
/ 29 сентября 2018

Используйте document.getElementById("total").value вместо document.getElementById("total").innerHTML = total.Кроме того, вам нужно активировать свой код для определенного события.Здесь я только что настроил его на запуск, когда пользователь вводит значение в любое поле ввода, используя атрибут oninput="calc()" в обоих ваших полях ввода: 

function calc() {
  var amount = document.getElementById("amount").value;
  var amount = parseInt(amount, 10);
  var quantity = document.getElementById("quantity").value;
  var quantity = parseInt(quantity, 10);
  var total = amount * quantity;
  document.getElementById("total").value = total;
}
Amount: <input type="number" id="amount" name="amount" oninput="calc();">
<br> Quantity: <input type="number" id="quantity" name="quantity" oninput="calc();">
<br> Total: <input type="number" id="total" name="total">
...