为何For循环仅打印一次？Document.write跳转页面问题如何解决？

1. 解决循环仅显示一次内容的问题 #

原代码循环中每次用 innerHTML = ... 直接覆盖<p>标签内的内容，所以无论循环多少次，最终只会保留最后一次赋值的结果。只需把赋值操作改成累加内容即可：

<p id="g"></p>
<script>
function input(){
    var name = window.prompt("What's your name?")
    var num = window.prompt("Input a number")
    // 先清空原有内容，避免重复调用函数时叠加旧内容
    document.getElementById("g").innerHTML = "";
    for (let i=0; i < num; i++) {
        document.getElementById("g").innerHTML += "Hi, " + name + "!<br>";
    }
}
</script>

如果追求更优的性能，可以先把所有内容拼接成一个字符串，再一次性赋值给innerHTML，减少DOM操作次数：

<p id="g"></p>
<script>
function input(){
    var name = window.prompt("What's your name?")
    var num = window.prompt("Input a number")
    let content = "";
    for (let i=0; i < num; i++) {
        content += "Hi, " + name + "!<br>";
    }
    document.getElementById("g").innerHTML = content;
}
</script>

2. 解决document.write写入新页面的问题 #

document.write 在页面加载完成后调用时，会自动关闭当前文档并创建新的空白文档，导致内容出现在新页面。解决的核心是放弃使用document.write，改用DOM元素的内容修改或元素追加方式：

比如用appendChild创建并添加元素：

<p id="g"></p>
<script>
function input(){
    var name = window.prompt("What's your name?")
    var num = window.prompt("Input a number")
    const container = document.getElementById("g");
    container.innerHTML = ""; // 清空原有内容
    for (let i=0; i < num; i++) {
        const textNode = document.createTextNode(`Hi, ${name}!`);
        const br = document.createElement("br");
        container.appendChild(textNode);
        container.appendChild(br);
    }
}
</script>

内容的提问来源于stack exchange，提问作者kilzah