JavaScript中for循环无法生成完整乘法表输出的问题排查

你当前的代码核心问题是每次循环都直接覆盖变量x的值，而不是把新的内容追加进去。不管x在循环内还是外声明，循环执行时都会用当前循环的结果替换掉x之前的内容，最终x只会保留最后一次循环（i=10）的结果。

修正方案1：用字符串拼接累加内容 #

初始化x为空字符串，循环中使用+=把每行内容追加到x后面：

var x = '';
for (var i = 1; i <= 10; i++) {
   x += '2 × ' + i + ' = ' + 2*i + '<br>';
};
document.getElementById('table').innerHTML = x;

<p id="table"></p>

修正方案2：直接操作元素的innerHTML累加 #

可以省去中间变量x，直接在循环里把内容追加到目标元素的innerHTML中：

var tableEl = document.getElementById('table');
for (var i = 1; i <= 10; i++) {
   tableEl.innerHTML += '2 × ' + i + ' = ' + 2*i + '<br>';
};

<p id="table"></p>

更简洁的现代写法（ES6+） #

用数组存储每行内容，最后用join方法拼接，性能比多次操作DOM或字符串拼接更优：

const rows = [];
for (let i = 1; i <= 10; i++) {
  rows.push(`2 × ${i} = ${2*i}<br>`);
}
document.getElementById('table').innerHTML = rows.join('');

<p id="table"></p>

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