Динамически применять прослушиватель событий изменения к каждому элементу выбора

Question

Есть ли способ упростить следующий код, чтобы мне не приходилось добавлять функцию для каждого отдельного вопроса? Моя цель - вернуть значение каждого выбора в переменную JS, которая соответствует имени HTML ID для этого элемента выбора. У меня здесь много вопросов, и должен быть способ лучше, чем объявление функции для каждого вопроса выбора.

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

Answer 1

Регистрация addEventListener для всех элементов - не лучшее решение. Скажем, у вас есть 100 элементов. Вы бы прислушались к изменениям на всех из них одновременно?

Лучшим решением было бы прослушивать keypress или keydown на document . А затем сузьте его до входов с помощью оператора 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), если у него другое имя.

Answer 2

Вы можете назначить общий класс для всех идентификаторов questionVar - скажем, "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
    });
}