Estoy tratando de hacer dinámicamente una lista desordenada usando javascript, donde solo tengo que enumerar la cantidad de elementos que quiero y los mostrará en la lista.
ejemplo de mensaje de entrada "¿cuántos elementos de la lista desea?" si ingresamos 2 e ingresamos, debería regresar
<ul> <li>hi</li> <li>hi</li> </ul>Simplifiqué el HTML y javascript, pero intenté envolver el apéndice y crear variables en un bucle for y no sucedió nada. aquí está el código html:
const numberofitemsel = document.getElementById('num-of-navitems'); const numberofitems = parseInt(numberofitemsel.value); const body = document.body; const savebtn = document.getElementById('save'); savebtn.addEventListener('click',()=>{ let ul =document.createElement("ul"); // append to body body.append(ul); // create list items for(var i=0;i<=numberofitems;i++){ let li=document.createElement("li"); li.innerText="hi"; // append to ul ul.appendChild(li); } }); <main> <h4>how many list items do you want?</h4> <input type="number" id="num-of-navitems"> <button type="button" id="save">save</button> </main>entonces, el resultado que quiero es si ingreso 3 en mi cuadro de entrada, quiero tres elementos de lista:
<ul> <li>hi</li> <li>hi</li> <li>hi</li> </ul>Debe usar for loop en savebtn.eventListener :
for(let i=0;i<Math.floor(Number(numberofitemsel.value));i++) { let li = document.createElement("li"); li.innerText = "hi"; // append to ul ul.appendChild(li); }Las otras partes de su código están bien.
Debe evaluar numberofitemsel.value después de que el usuario haga clic en el botón, no antes.
const numberOfItemsEl = document.getElementById('num-of-navitems'); const body = document.body; const savebtn = document.getElementById('save'); savebtn.addEventListener('click', () => { const numberOfItems = parseInt(numberOfItemsEl.value); const ul = document.createElement("ul"); body.append(ul); for (let i = 0; i < numberOfItems; i++) { const li = document.createElement("li"); li.innerText = "hi"; ul.appendChild(li); } }); <main> <h4>how many list items do you want?</h4> <input type="number" id="num-of-navitems"> <button type="button" id="save">save</button> </main> const main = document.querySelector("#main"); const mainUl = document.querySelector("#mainUl"); const inputText = document.querySelector("#textInput"); const taskBtn = document.querySelector("#addTask"); function addTask(times) { for (var i = 0; i < times; i++) { const li = document.createElement("li"); li.innerHTML = "hi"; mainUl.appendChild(li); } } taskBtn.addEventListener("click", () => { if (inputText.value == "") { alert("please enter number!!"); } else { addTask(inputText.value); inputText.value = ""; } }); <div id="main"> <input type="text" id="textInput" placeholder="Enter Number" /> <button id="addTask">Add List</button><br /> <ul id="mainUl"></ul> </div>