JavaScript中getElementById在while循环内用innerHTML赋值仅显示最后一个值

问题原因 #

你在循环中使用=对innerHTML直接赋值，每次操作都会覆盖DOM节点内之前的所有内容，因此循环执行结束后只会保留最后一次赋值的结果。而document.write的默认行为是在页面现有内容末尾追加写入，所以可以正常输出完整序列。

修复方案 #

方案1：直接修改赋值逻辑为追加 #

把循环内的赋值符号从=改为+=，即可每次将新内容追加到原有内容之后：

document.getElementById("result1").innerHTML += parseInt(n1) + ",";

方案2：先拼接完整结果再一次性赋值（更推荐） #

多次操作DOM会带来额外性能开销，更优的写法是先在内存中拼接好完整的结果数组，循环结束后再一次性写入DOM，还可以顺便处理末尾多余的逗号问题：

function calculate() {
    // 提前统一转成数字，避免循环中重复执行parseInt
    const n1 = parseInt(document.getElementById("number1").value);
    const i1 = parseInt(document.getElementById("increment1").value);
    const max = parseInt(document.getElementById("maximum").value);
    const resultList = [];
    let current = n1;

    while (current <= max) {
        resultList.push(current);
        current += i1;
    }

    // 用join方法拼接数组，自动添加逗号且不会出现末尾多余逗号
    document.getElementById("result1").innerHTML = resultList.join(',');
}

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