在JS中使用onchange时如何存储输入字段中的值答案

【问题标题】：How to store values from input fields when using onchange in JS在JS中使用onchange时如何存储输入字段中的值
【发布时间】：2021-07-13 00:49:26
【问题描述】：

我正在尝试访问每个输入字段中的值并将宽度乘以高度，然后显示它。任何帮助表示赞赏。谢谢！这是我的代码。

const width = document.querySelector("#width");
const height = document.querySelector("#height");
const demo1 = document.getElementById("demo");
const demo2 = document.getElementById("demo1");

width.onchange = function() {
  let num1 = Number(width.value);
  console.log(num1);
  demo1.innerHTML = num1;
};

height.onchange = function() {
  let num2 = Number(height.value);
  demo2.innerHTML = num2;
  console.log(num2);
};

<label for="width">Width (mm)*</label>
<input required class="width" id="width" type="number">
               
<label for="length">Height (mm)*</label>
<input required class="length" id="height" type="number">

<p id="demo"></p>
<p id="demo1"></p>

【问题讨论】：

标签： javascript html css onchange input-field

【解决方案1】：

在这种情况下，您可以做很多事情。您可以继续从其他输入中获取值，仅此而已。

width.onchange = function() {
  let num2 = Number(height.value);
  let num1 = Number(width.value);
  
  demo2.innerHTML = num2 * num1;
};

height.onchange = function() {
  let num2 = Number(height.value);
  let num1 = Number(width.value);
  
  demo2.innerHTML = num2 * num1;
};

如您所见，代码相同，因此您可以为其创建一个函数。

【讨论】：

【解决方案2】：

您可以为每个输入使用change eventListener 将值存储在 object 中，其中一个用于 width em>，另一个为 height。运行相同的回调，将检查event.target 的classList 的width 和height 就像您在 HTML 中分配的那样。

一旦我们找到一个包含的classList，我们分配事件的键值：width em> 或 height作为key，然后我们将event.target.value作为value 对象 => obj['width'] = parseInt(e.target.value).

然后我们检查Object.keys(obj).includes("width") && Object.keys(obj).includes("height")，所以我们有一个匹配width和height的键对象设置为键，然后我们将值相加。

const width = document.querySelector("#width");
const height = document.querySelector("#height");
const demo = document.getElementById("demo");

const obj = {}

function multSum(e) {
  if (e.target.classList.contains('width')) {
    obj['width'] = parseInt(e.target.value)
    demo.textContent = `${obj.width}`
  }
  
  if (e.target.classList.contains('height')) {
    obj['height'] = parseInt(e.target.value)
    demo.textContent = `${obj.height}`
  } 
    
  Object.keys(obj).includes("width") && Object.keys(obj).includes("height") ?
    demo.textContent = `${obj.width} * ${obj.height} = ${obj.width * obj.height}` : null;
}

width.addEventListener('change', multSum)
height.addEventListener('change', multSum)

<label for="width">Width (mm)*</label>
<input required class="width" id="width" type="number">

<label for="length">Height (mm)*</label>
<input required class="height" id="height" type="number">

<p id="demo"></p>

【讨论】：