Question

首先是的，我确实看了很多关于这个话题的其他代码，但这些代码都不像我的。我有一个非常基本的代码，所以如果我错过了一些明显的东西我很道歉，但我无法理解为什么我的代码只显示一个数字。

这是代码。

<!DOCTYPE html>
<head>
</head>
<body>
<div id="test"></div>
<script>
var wildCard = (Math.floor(Math.random() * 5) + 1);
var temp = 1;
for (var i=0; i < 5; i++){
    document.getElementById("test").innerHTML = wildCard + "<br />";
    temp++;
}
</script>
</body>
</html>

非常基本的代码，但唯一的问题是我只能打印一个随机数，而不是在垂直线上打印5个。我想知道我错过了为什么它不会循环。

Answer 1

为什么只打印一个数而不是五个是因为在每次迭代中都会替换id为test的内部html的DOM节点。当for循环结束时，您只能看到最后一次迭代的值。

您可以使用createTextNode和appendChild完成此任务，如下所示：

var temp = 1;
for (var i=0; i < 5; i++){
    const wildCard = (Math.floor(Math.random() * 5) + 1);
    const textNode = document.createTextNode(wildCard);
    const testDiv = document.getElementById("test");
    testDiv.appendChild(textNode)
    testDiv.appendChild(document.createElement("br"));
    temp++;
}

Answer 2

在循环的每次迭代中生成一个新的随机数，然后在循环结束后分配完整的HTML一次。

<script>  
    var temp = 1;
    var html = "";
    for (var i=0; i < 5; i++) {
        var wildCard = (Math.floor(Math.random() * 5) + 1);
        html += wildCard + "<br/>";
        temp++;
    }
    document.getElementById("test").innerHTML = html;
</script>

Javascript / For循环/基本代码/仅运行一次

2 个答案: