Как запросить несколько элементов, которые начинаются с одинакового идентификатора, а затем проверить, изменился ли ввод

Question

У меня есть список текстовых вводов, которые начинаются с одного и того же идентификатора, но немного отличаются в конце. Когда пользователь вводит текст в любое из этих полей ввода, я хочу выполнить функцию. На данный момент это работает со следующим кодом:

var heightInches = document.querySelector("#Height_Inches");
var heightFeet = document.querySelector("#Height_Feet");
var heightCentimeters = document.querySelector("#Height_Centimeters");

      heightInches.oninput = function (e) {
         console.log("Edited");
      }
      heightFeet.oninput = function (e) {
         console.log("Edited");
      }
      heightCentimeters.oninput = function (e) {
         console.log("Edited")
      }

Проблема в том, что мне не нравится повторение, и я бы предпочел запросить все идентификаторы, которые начинаются с "Height_", и сделать что-то (как то, что оправдано внутри каждой функции, будет одинаковым.

Вот то, что я пробовал, но не работает:

var allHeight = document.querySelector('[id*="Height_"]');

allHeight.oninput = function (e) {
  console.log("edited"); 
}

Я также пробовал то же самое с querySelectorAll

Может, кто-нибудь поможет мне понять, где я ошибаюсь? Любой другой ответ на вопрос Stack Overflow и статья, которую я вижу, указывают на то, что id* является правильным способом выбора? Спасибо

Answer 1

Если я правильно понимаю, это то, что вы ищете.

Единственное, чего вам не хватало, это циклически проходить по вашим элементам.

const inputs = document.querySelectorAll('[id*="Height_"]');

inputs.forEach( input => {
    input.oninput = function (e) {
      console.log("edited"); 
    }
})

<input type="text" id="Height_1">
<input type="text" id="Height_2">
<input type="text" id="Height_3">

Answer 2

Вместо использования идентификатора, который должен быть уникальным, почему бы не добавить класс, подобный .height-input, к каждому входу, а затем выбрать их все?

// Get elements
const inputs = document.querySelectorAll('.height-input');
const outputEl = document.querySelector('.output');

// Attach event handlers
for (let i = 0; i < inputs.length; i++) {
    inputs[i].oninput = function(e) {
        // Handle input
        outputEl.innerHTML = `Input received on #${e.target.id}`;
    }
}

.output {
   margin-top: 10px;
}

<input type="text" class="height-input" id="HeightInches">
<input type="text" class="height-input" id="HeightFeet">
<input type="text" class="height-input" id="HeightCentimeters">

<div class="output">Waiting for input...</div>