I have a list of text inputs which all start with the same id but are slightly different at the end. When text is entered by the user in any of these input fields I want to execute a function. At the moment this is working with the following code:

```
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")
      }

```

The issue is that I don't like the repetition and would rather query all of the ids that begin with "Height\_" and do something (as what is excuted inside each function will be the same. 

Here is what I have tried but does not work: 

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

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

```

I have also tried the same with `querySelectorAll`

Please could someone help with where I am going wrong here? Every other Stack Overflow answer and article I see seems to suggest that `id*` is the correct way to select? Thank you