需要帮助创建带有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');应该进入[[inside for循环。

• 不要忘记将您的LI插入相应的UL

  after

循环中。

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);
}