更改 forEach 中的变量值

Question

我有三个输入和三个变量，我的目标是用输入中的值更改变量值

const inputs = [
  document.querySelector(".bill-input"),
  document.querySelector(".custom"),
  document.querySelector(".people-number"),
];

var bill = 0;
var tip = 0;
var people = 0;

我做到了这样

inputs[0].addEventListener("keyup", (e) => {
  bill = Number(e.target.value);
});

inputs[1].addEventListener("keyup", (e) => {
  tip = Number(e.target.value);
});

inputs[2].addEventListener("keyup", (e) => {
  people = Number(e.target.value);
});

我很确定这不是最好的方法，所以我想问问是否有一种方法可以用 forEach 或任何其他方法来完成，而不需要我每一个都写一个时间.

Answer 1

是的，您可以使用 forEach。我使用一个开关来获取输入元素的索引（在 inputs const 中）以了解更新了什么变量。

请看下面的片段：

var bill = 0;
var tip = 0;
var people = 0;
const inputs = [
  document.querySelector(".bill-input"),
  document.querySelector(".custom"),
  document.querySelector(".people-number"),
];
inputs.forEach(function(item,index){
  item.addEventListener("keyup", (e) => {
    const val = Number(e.target.value);
    switch(index){
      case 0 : bill = val; break;
      case 1 : tip = val; break;
      case 2 : people = val; break;
    }
    console.log(bill,tip,people)
  });
});

<input value="3" type="number" class="bill-input">
<input value="10" type="number" class="custom">
<input value="100" type="number" class="people-number">

Answer 2

将 a data attribute 添加到每个输入。
使用一个对象来维护这些输入的状态，而不是 n 个变量。
有一个处理程序可以根据对象的 ID 更新对象属性。

// Initialise the values object
const values = { bill: 0, tip: 0, people: 0 };

// Cache the inputs, and add listeners to them
const inputs = document.querySelectorAll('input');
inputs.forEach(input => input.addEventListener('keyup', handleChange));

// Grab the id from the input's dataset, and
// set the values object property to match
// the input value
function handleChange() {
  const { id } = this.dataset;
  values[id] = this.value;
  console.log(JSON.stringify(values));
}

input { display: block; }

Bill<input data-id="bill">
Tip <input data-id="tip">
People <input data-id="people">

其他文档

Destructuring assignment

更改 forEach 中的变量值

Change variable value inside forEach

javascript

arrays

variables

foreach

numbers