addeventlistener getting eaten by subsequent uses

Question

This is must be some strange js thing I'm not aware of, but why will this code only log if the last input field changes? (Id 3) Since I am adding the eventListeners to all input fields, I'd expect outputs from all of them...

function constructInputs(ctx, id) {
    console.log(id);

    ctx.innerHTML += `<input type="text" id="${id}_textInput"></br>`;
    let textInput = document.getElementById(`${id}_textInput`);
    textInput.addEventListener("input", function (e) { 
        console.log(id);
    });
}

const ctx = document.getElementById("centerdiv");

constructInputs(ctx, '1');
constructInputs(ctx, '2');
constructInputs(ctx, '3');

<body>
    <div style="text-align: center;" id="centerdiv">
    </div>
    <script src="./main.js"></script>
</body>

Btw sorry for the title, but I couldn't come up with something better. — GoldenDremora, Dec 19 '22 at 21:29

score 1 · Accepted Answer · answered Dec 19 '22 at 21:30

Overwriting the innerHTML will effectively destroy all event listeners and recreate the elements. Use document.createElement and appendChild or append instead.

function constructInputs(ctx, id) {
  console.log(id);
  const input = document.createElement('input');
  input.id = `${id}_textInput`;
  ctx.append(input, document.createElement('br'));
  input.addEventListener("input", function(e) {
    console.log(id);
  });
}

const ctx = document.getElementById("centerdiv");

constructInputs(ctx, '1');
constructInputs(ctx, '2');
constructInputs(ctx, '3');

<div style="text-align: center;" id="centerdiv">
</div>

addeventlistener getting eaten by subsequent uses

1 Answers1