Need help with some Javascript, I'm trying to populate all text inputs with the filename from the file input. Only one text input is populated. Thanks in advance: <html> <head> <title>Untitled Document</title> <meta charset="utf-8"> </head> <body> <form> <input type="file" id="fileinput"><br> <input type="text" id="textinput_1" class="countme"><br> <input type="text" id="textinput_2" class="countme"><br> <input type="text" id="textinput_3" class="countme"><br> <input type="text" id="textinput_3" class="countme"> </form> <script> const countAll = document.querySelectorAll('.countme').length; // Count elements console.log(countAll); // 3 for (let i = 1; i < countAll; i++) { const textinput = document.getElementById('textinput_' + i); // textinput_1, textinput_2, etc document.getElementById('fileinput').oninput = function() { textinput.value = document.getElementById('fileinput').files[0].name; } } </script> </body> </html> Code (markup):
Your logic is inside-out, you should be looping INSIDE the event, not around it. You're also overthinking it since you do a perfectly good querySelectorAll at the start, meaning you shouldn't be needing to waste time screwing around with getElementById inside the event. Also this is 2022 not 1998, don't directly use onInput unless you literally just created the element on the DOM. Use addEventListener. You also might be better off just walking the DOM instead of dicking around with querySelectorAll, letting you kill off the ID's and the classes. <form> <input type="file" id="fileinput"><br> <fieldset id="counts"> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"> </fieldset> </form> <script> { // isolate scoope const fileInput = document.getElementById("fileInput"), countSet = document.getElementById("counts"); fileInput.addEventListener("input", (event) => { let input = countSet.firstElementChild; if (input) do { input.value = fileInput.files[0].name; } while (input = input.nextElementSibling); } ); } </script> Code (markup): Remember, getElement(s)ByXXX and querySelector(all) are slow, so try not to call them more than you need to, and avoid using them inside events. Likewise arrays and iterables are slow compared to just walking the DOM. Add a container -- like a fieldset -- hook onto it's first element child, and then walk the siblings. INSIDE the event, not around it.[/s]