javascript - 如何查询以相同ID开头的多个元素，然后检查输入是否发生变化

Question

我有一个文本输入列表，它们都以相同的 id 开头，但结尾略有不同。当用户在任何这些输入字段中输入文本时，我想执行一个函数。目前正在使用以下代码:

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_”开头的 id 并执行某些操作(因为每个函数内执行的内容都是相同的。

这是我尝试过但不起作用的方法:

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">