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

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

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

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>

解决方法

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

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;
};

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

您可以将值存储在 object 中，对每个输入使用一个 change eventListener，一个用于 width ，另一个表示身高。运行相同的回调来检查event.target的classList的宽度和height，就像您在 HTML 中指定的那样。

一旦我们找到一个包含的classList，我们分配事件的键值：width or height 作为键，然后我们将 event.target.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>