How can I use a onchange function for multiple input elements?

Question

I would like to have one function that registers the change of one of the input elements with the tag name input. Is that possible? It's not working the way I've coded it now, I don't get any console errors either.

<input type="text" id="inpBredde" placeholder="Bredde: ">
    <input type="text" id="inpHoyde" placeholder="Høyde: ">
    <label>Farge: <input type="color" id="inpFarge"></label>
    <label>Avrunding<input type="range" min="0" max="50" id="inpAvrunding"></label>
    <input type="text" id="inpxpos" placeholder="X posisjon:">
    <input type="text" id="inpypos" placeholder="Y posisjon:">
    <div id="div"></div>
    <script>
        var inpBredde = document.getElementById("inpBredde");
        var inpHoyde = document.getElementById("inpHoyde");
        var inpFarge = document.getElementById("inpFarge");
        var inpAvrunding = document.getElementById("inpAvrunding");
        var inpxpos = document.getElementById("inpxpos");
        var inpypos = document.getElementById("inpypos");
        var inputs = document.getElementsByTagName("input");
        inputs.onchange = function () {
            console.log("Hi");
        }
    </script>

score 0 · Answer 1 · answered Mar 11 '20 at 11:37

var inpBredde = document.getElementById("inpBredde");
        var inpHoyde = document.getElementById("inpHoyde");
        var inpFarge = document.getElementById("inpFarge");
        var inpAvrunding = document.getElementById("inpAvrunding");
        var inpxpos = document.getElementById("inpxpos");
        var inpypos = document.getElementById("inpypos");
        var inputs = document.getElementsByTagName("input");
        document.querySelectorAll("input").forEach(inpt=>inpt.addEventListener('change',function () {
            console.log("Hi");
        }))

<input type="text" id="inpBredde" placeholder="Bredde: ">
    <input type="text" id="inpHoyde" placeholder="Høyde: ">
    <label>Farge: <input type="color" id="inpFarge"></label>
    <label>Avrunding<input type="range" min="0" max="50" id="inpAvrunding"></label>
    <input type="text" id="inpxpos" placeholder="X posisjon:">
    <input type="text" id="inpypos" placeholder="Y posisjon:">
    <div id="div"></div>

@vicconicco [document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)? — Mechanic, Mar 11 '20 at 17:21

How can I use a onchange function for multiple input elements?

1 Answers1