javascript - 使用 vanilla JS 重新计算更改事件的数字

Question

我正在构建一个简单的乘法形式，它计算总和并将答案直接呈现给 DOM。我正在使用 <select>菜单选择初始号码和 <input type="number">为乘数。

更改 <select> 时是否可以重新计算答案并将其自动渲染到 DOM值(value)？该表格目前可以使用，但用户需要在重新选择初始数字后删除乘数。

这是我目前所在的位置:

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

Answer 1

看一下下面的例子。另请查看 following查看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;
}