需要帮助创建带有 for 循环的 html 元素

Question

I am trying to create inputs in my html and am using a for loop to generate a random amount every time a button is clicked. I click the button, the console prints out the random number but only one input is generated. It is even printing out the correct number of console.logs , just not the inputs. I am not sure why and would love any help.

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'); should go inside the for loop.

• don't forget to insert your LI in the respective UL after the loop.

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