我正在嘗試使用javascript動態創建一個無序串列，我只需要列出我想要的專案數，它就會顯示在串列中。
示例輸入提示“您想要多少個串列項？” 如果我們輸入 2 并輸入它應該回傳
<ul>
<li>hi</li>
<li>hi</li>
</ul>
我已經簡化了 HTML 和 javascript，但我嘗試在 for 回圈中包裝追加并創建變數，但什么也沒發生。繼承人代碼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>所以我想要的輸出是如果我在輸入框中輸入 3 我想要三個串列項：
<ul>
<li>hi</li>
<li>hi</li>
<li>hi</li>
</ul>
uj5u.com熱心網友回復：
您應該for在以下位置使用回圈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);
}
您的代碼的其他部分都可以。
uj5u.com熱心網友回復：
您需要在用戶單擊按鈕numberofitemsel.value 之后進行評估，而不是之前。
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>uj5u.com熱心網友回復：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/463976.html
標籤：javascript
上一篇：如何正確設定Golang庫？