Mi objetivo es representar las cadenas en la matriz en función de su longitud, pero no representa nada debajo del botón. ¿Puedes ayudarme a encontrar lo que está pasando?
let myLeads = ["stackoverflow.io", "you.com"] let myLeads = ["stackoverflow.io", "you.com"] const inputEl = document.getElementById("input-el") const inputBtn = document.getElementById("input-btn") const ulEl = document.getElementById("ul-el") inputBtn.addEventListener("click", () => { myLeads.push(inputEl.value) console.log(myLeads) }) for (let i = 0; i < myLeads.legnth; i++) { ulEl.innerHTML += "<li>" + myLeads[i] + "</li>" } <body> <input type="text" id="input-el"> <button id="input-btn">Save Company</button> <ul id="ul-el"></ul> <script src="index.js"></script> </body>Escribiste mal length en el bucle for, por eso no funciona. Además, lo he refactorizado un poco, nada más.
let myLeads = ["stackoverflow.io", "you.com"] const inputEl = document.getElementById("input-el") const inputBtn = document.getElementById("input-btn") const ulEl = document.getElementById("ul-el") inputBtn.addEventListener("click", () => { myLeads.push(inputEl.value) //Render() Data(inputEl.value) console.log(myLeads) }) function Data(value) { ulEl.innerHTML += "<li>" + value + "</li>" } function Render() { for (let i = 0; i < myLeads.length; i++) { Data(myLeads[i]) } } Render() <body> <input type="text" id="input-el"> <button id="input-btn">Save Company</button> <ul id="ul-el"> </ul> <script src="index.js"></script> </body> let myLeads = ["stackoverflow.io", "you.com"]; const inputEl = document.getElementById("input-el"); const inputBtn = document.getElementById("input-btn"); const ulEl = document.getElementById("ul-el"); inputBtn.addEventListener("click", () => { myLeads.push(inputEl.value) console.log(myLeads) }); for (let i = 0; i < myLeads.length; i++) { ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"; } <body> <input type="text" id="input-el"> <button id="input-btn">Save Company</button> <ul id="ul-el"> </ul> <script src="index.js"></script> </body> Solo hay un pequeño error tipográfico que cometiste. En el ciclo for , pones legnth y debería ser length .
Debe guardar sus cambios en DOM. A continuación, crea un nuevo elemento de lista en cada nueva entrada y agrega, "guarda" en DOM.
inputBtn.addEventListener("click", () => { myLeads.push(inputEl.value); let newEl = document.createElement("li"); newEl.innerText = inputEl.value; ulEl.appendChild(newEl); });Además, nunca use innerHTML en cosas que obtuvo directamente del usuario. Es peligroso.