需要帮助创建带有 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);
}