动态地将 Change 事件侦听器应用于每个选择元素答案

【问题标题】：Dynamically apply Change event listener to each selection element动态地将 Change 事件侦听器应用于每个选择元素
【发布时间】：2020-06-21 01:31:59
【问题描述】：

有没有办法简化以下代码，这样我就不必为每个问题添加一个函数？我的目标是将每个选择的值返回给与该选择元素的 HTML ID 名称匹配的 JS 变量。我在这里有很多问题，必须有比为每个选择问题声明一个函数更好的方法。

let question1Var
let question2Var

const question1 = document.querySelector('#question1Var');
const question2 = document.querySelector('#question2Var');

question1 .addEventListener('change', (event) => {
  question1Var= event.target.value;
});

question2 .addEventListener('change', (event) => {
  question2Var = event.target.value;
});

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以为所有 questionVar id 提供一个通用类 - 比如说“question”

let questionVariables = {};

let elements = document.getElementsByClassName("question"); //this will store all the elements

for(let i=0;i<elements.length;i++)
{//for each item bind the change event
    elements[i].addEventListener('change', (event) => {
        questionVariables[event.target.id] = event.target.value;//store the value in a json having id as the key
    });
}

【讨论】：

谢谢！为了让它工作，我必须将 [this.id] 更改为 [event.target.id]，这有意义吗？
是的，我认为 event.target.id 会是更好的选择 - 我也会更新答案

【解决方案2】：

在所有元素上注册 addEventListener 并不是一个好的解决方案。假设你有 100 个元素。你会同时听他们的变化吗？

更好的解决方案是在 document 上监听 keypress 或 keydown。然后使用 if 语句将其缩小为输入。

let questions  = {}

let inputs = document.querySelectorAll("input.question")
let pre = document.querySelector("questions")
document.addEventListener("keypress", (event) => {
  const input = event.target;
  if (input.classList.contains("question")) {
    const index = [...input.parentNode.children].indexOf(input)
    questions["question" + (index +1)] = input.value
    console.log(questions)
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
    <input type="text" class="question col-12" name="">
  </div>
  
</div>

如果名称不同，您可以使用 input.name 代替 "question" + (index +1)。

【讨论】：