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>>Solution :
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>