Estoy atascado. Intento insertar valores de entrada en una matriz, lo que realmente funciona, pero luego quiero sacarlos en una lista desordenada y no aparecen. ¿Qué estoy haciendo mal?
const inputBtn = document.querySelector("#input-btn"); let myLeads = []; const inputEl = document.querySelector("#input-el"); const ulEl = document.querySelector("#ul-el"); inputBtn.addEventListener("click", function() { myLeads.push(inputEl.value); console.log(myLeads); }); for (let i = 0; i < myLeads.length; i++) { ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"; } <input type="text" id="input-el" /> <button id="input-btn">SAVE INPUT</button> <ul id="ul-el"></ul>Su ciclo no hace mucho porque se ejecuta antes de cualquier clic.
Elimine la dependencia de la matriz y use insertAdjacentHTML para agregar el valor envuelto de la entrada directamente a la lista dentro del controlador de clics.
(Nota: estoy usando insertAdjacentHTML aquí porque hay problemas de rendimiento que surgen al concatenar HTML a la propiedad innerHTML de un elemento).
const inputBtn = document.querySelector('#input-btn'); const inputEl = document.querySelector('#input-el'); const ulEl = document.querySelector('#ul-el'); inputBtn.addEventListener('click', function() { ulEl.insertAdjacentHTML('beforeend', `<li>${inputEl.value}</li>`); }); <input type="text" id="input-el" /> <button id="input-btn">SAVE INPUT</button> <ul id="ul-el"></ul>Documentación adicional
Una opción sería llamar inmediatamente a su bucle for justo después de ingresar a la matriz. Al igual que:
inputBtn.addEventListener("click", function() { myLeads.push(inputEl.value); for (let i = 0; i < myLeads.length; i++) { ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"; } console.log(myLeads); });En este momento, el bucle for no se ejecuta en absoluto.