let myLeads = []; const inputEl = document.getElementById("input-el"); const inputBtn = document.getElementById("input-btn"); const ulEl = document.getElementById("ul-el"); inputBtn.addEventListener("click", function(){ myLeads.push(inputEl.value); console.log(myLeads) }) let arr = [2, 3, "fadf"] /*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/ for(let i = 0; i < myLeads.length; i++){ ulEl.innerHTML += "<li>" + myLeads[i] + "</li>" } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title>save leads</title> <link rel="stylesheet" href="/index.css"> </head> <body> <input type="text" id="input-el"> <button id="input-btn">Save tabs</button> <ul id="ul-el"></ul> <script src="/index.js"></script> </body> </html>Pon el bucle en una función y llámalo. También asegúrese de restablecer el ul para que esté vacío
let myLeads = []; const inputEl = document.getElementById("input-el"); const inputBtn = document.getElementById("input-btn"); const ulEl = document.getElementById("ul-el"); inputBtn.addEventListener("click", function(){ myLeads.push(inputEl.value); updateList(); }) let arr = [2, 3, "fadf"] /*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/ function updateList(){ ulEl.innerHTML = ""; for(let i = 0; i < myLeads.length; i++){ ulEl.innerHTML += "<li>" + myLeads[i] + "</li>" } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title>save leads</title> <link rel="stylesheet" href="/index.css"> </head> <body> <input type="text" id="input-el"> <button id="input-btn">Save tabs</button> <ul id="ul-el"></ul> <script src="/index.js"></script> </body> </html>No está actualizando el elemento HTML en ninguna parte cuando se activa el evento de clic. Eso significa que su lista solo se completa con los elementos iniciales de myLeads cuando se actualiza la página y nunca más.
Mueva el ciclo para generar elementos li en una función, por ejemplo
function updateList(arr){ ulEl.innerHTML = ""; for(let i = 0; i < arr.length; i++){ ulEl.innerHTML += "<li>" + myLeads[i] + "</li>" } }y luego llamarlo dentro del controlador de eventos
inputBtn.addEventListener("click", function(){ myLeads.push(inputEl.value); console.log(myLeads) updateList(myLeads); })