需要帮助使用 for 循环创建 html 元素答案

【问题标题】：need help creating html elements with a for loop需要帮助使用 for 循环创建 html 元素
【发布时间】：2020-08-22 21:31:17
【问题描述】：

我正在尝试在我的 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');
}

【问题讨论】：

标签： javascript html loops for-loop dom

【解决方案1】：

const input = document.createElement('input'); 应该进入 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);
}

【讨论】：

你是对的，它现在工作得很好。为什么const input 需要在循环内而不是const listItem，不是都由for 循环生成的？
@AndrewLovato 仔细阅读了代码......换句话说，它说："for random 次，创建元素输入，并追加它”。那应该回答你的问题。如果它是在循环之外创建的，您最终会一遍又一遍地附加相同的输入。
您需要一个listItem 还是多个？如果您需要一里内的一个输入，则将所有代码移动到for 循环内。
哦，我明白了，好吧，是的，现在说得通了。