Пересчитать число в событии изменения, используя vanilla JS

Я создаю простую форму умножения, которая вычисляет сумму и отображает ответ прямо в DOM. Я использую меню <select> для выбора начального числа и <input type="number"> для множителя.

Можно ли пересчитать ответ и автоматически отобразить его в DOM при изменении значения <select>? В настоящее время форма работает, но пользователю нужно будет удалить множитель после повторного выбора исходного числа.

Вот где я сейчас:

const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");
let multiplier = 2;

selectValIn.addEventListener("change", switchValIn);
inputValIn.addEventListener("keyup", convert);

function switchValIn() {
  let selectedVal = selectValIn.value;

  if (selectedVal === "four") {
  multiplier = 4;
  } else if (selectedVal === "six") {
  multiplier = 6;
  } else if (selectedVal === "eight") {
  multiplier = 8;
  }
}

function convert(e) {
  const inputValIn = e.target.value;
  const multiplication = inputValIn * multiplier;

  valOut.innerText = multiplication;
}
<div class="converter">
  <div class="converter-row">
    <select class="select-val-in">
    <option value="two">2</option>
    <option value="four">4</option>
    <option value="six">6</option>
    <option value="eight">8</option>
  </select>
  </div>
  <div class="converter-row">
  <label>Multiplied by:</label>
  <input class="input-val-in" type="number" value="0" />
  </div>
  <div class="converter-row">
  <p>Equals: <span class="val-out">0</span></p>
  </div>
</div>

Вот Codepen с рабочим примером: https://codepen.io/abbasarezoo/pen/59776227c017d1c1a3a245a37c305e76


javascript html calculation
person abbas_arezoo    schedule 03.09.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");

selectValIn.addEventListener("input", calculate);
inputValIn.addEventListener("input", calculate);

function calculate()
{
  valOut.innerText = Number(inputValIn.value) * Number(selectValIn.value);
}
<div class="converter">
  <div class="converter-row">
    <select class="select-val-in">
      <option value="2">2</option>
      <option value="4">4</option>
      <option value="6">6</option>
      <option value="8">8</option>
    </select>
  </div>
  
  <div class="converter-row">
    <label>Multiplied by:</label>
    <input class="input-val-in" type="number" value="0" />
  </div>
  
  <div class="converter-row">
    <p>Equals: <span class="val-out">0</span></p>
  </div>
</div>

Также обратите внимание, что переключатель, возможно, было бы легче читать:

// Easier to read
switch(selectedVal)
{
 case 'two':
  multiplier = 2;
  break;
case 'four':
  multiplier = 4;
  break;
case 'six':
  multiplier = 6;
  break;
case 'eigth':
  multiplier = 8;
  break;
}
person SuperDJ    schedule 03.09.2018
comment
Спасибо за вашу помощь, это то, что я искал. Я предполагаю, что использование переключателя сработало бы, если бы значение параметра не было числом? - person abbas_arezoo; 04.09.2018

arrow_upward
2
arrow_downward

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

// Selectors

const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");

// Calculate

function calculate() {
	const value = Number(inputValIn.value);
	const multiplier = Number(selectValIn.value);
	valOut.innerText = value * multiplier;
}

// Event listeners

selectValIn.addEventListener("change", calculate);
inputValIn.addEventListener("input", calculate);
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.converter-row {
	margin: 0 0 1rem;
}
<div class="converter">
	<div class="converter-row">
		<select class="select-val-in">
			<option value="2" selected>2</option>
			<option value="4">4</option>
			<option value="6">6</option>
			<option value="8">8</option>
		</select>
	</div>
	<div class="converter-row">
		<label>Multiplied by:</label>
		<input class="input-val-in" type="number" value="0" />
	</div>
	<div class="converter-row">
		<p>Equals: <span class="val-out">0</span></p>
	</div>
</div>

person Dominic    schedule 03.09.2018
comment
Спасибо за вашу помощь, это то, что я искал. - person abbas_arezoo; 04.09.2018

arrow_upward
0
arrow_downward

Вы пытались сохранить свой inputValIn, а также ваш множитель? Таким образом, вы можете просто выполнить проверку внутри вашей функции switchValIn, чтобы увидеть, существует ли уже inputValIn, и в этом случае вы можете просто выполнить умножение и немедленно отобразить.

Другой подход состоит в том, чтобы установить inputValue по умолчанию, чтобы вам никогда не приходилось выполнять проверку, а вместо этого запускать умножение каждый раз, когда любое из них изменяется.

person Damanveer Singh    schedule 03.09.2018
comment
Ваш ответ был бы более полезным для ОП и будущих посетителей, если бы вы показали, что имеете в виду. Вы можете сделать это, предоставив некоторый код в ответе - person SuperDJ; 04.09.2018