需要幫助創建帶有 for 循環的 html 元素

Question

我正在嘗試在我的 html 中創建輸入，並且每次單擊按鈕時都使用 for 循環生成隨機量。 我單擊按鈕，控制台打印出隨機數，但只生成一個輸入。 它甚至打印出正確數量的console.logs ，而不是輸入。 我不知道為什么，並希望得到任何幫助。

const generateRanNum = () => {
    let randomNumber = Math.floor(Math.random() * 20);
    return randomNumber
}



const generateInputs = (ranNum) => {
    const listItem = document.createElement('li');
    const input = document.createElement('input');
    for(let i = 1; i <= ranNum; i++){
        inputsList.appendChild(listItem);
        listItem.appendChild(input);
        console.log(ranNum)

    }


}

startButton.onclick = () => {
   const ranNum = generateRanNum()
    generateInputs(ranNum)
    // alert('clicked');
}

Answer 1

• const input = document.createElement('input'); 應該 go在for循環內。

• 不要忘記在循環后將您的 LI 插入相應的 UL 中。

const generateInputs = (ranNum) => {
    const listItem = document.createElement('li');

    for(let i = 1; i <= ranNum; i++){
        const input = document.createElement('input');
        listItem.appendChild(input);
    }

    inputsList.appendChild(listItem);
}