如何将JS计算得到的乘法结果列表输出显示到HTML页面中

问题根因 #

你代码的问题出在循环内直接对x元素的innerHTML属性赋值，每次赋值都会清空元素原有内容再写入新的计算结果，前面4次的计算结果都会被后续的值覆盖，最终页面只会显示最后一次循环的5*num的结果。

修复方案 #

可以先把所有计算结果拼接成完整的HTML字符串，循环结束后一次性赋值给目标元素，避免多次覆盖的问题，同时还能减少DOM操作次数提升性能。

修改后的JS代码 #

function showData() {
    var theSelect = demoForm.part;
    var secondP = document.getElementById('secondP');
    // 提前取出选中值避免重复读取
    var selectedVal = theSelect[theSelect.selectedIndex].value;
    secondP.innerHTML = '对应标准套装为：' + selectedVal;
    
    // 把选中值转为数字类型，避免字符串类型导致运算异常
    var num = Number(selectedVal);
    var resultStr = '';
    for(var i = 1; i <= 5; i++) {
      result = i * num;
      console.log(result);
      // 拼接结果，加<br>实现换行展示
      resultStr += result + '<br>';
    }
    // 循环结束后一次性写入页面
    document.getElementById("x").innerHTML = resultStr;
}

可选的简易修改方式 #

如果不想改太多代码，也可以直接把循环内的赋值符号从=改成+=，即可实现内容追加，不过这种方式会多次操作DOM，数据量大的时候性能稍差：

// 循环内修改为
document.getElementById("x").innerHTML += result + '<br>';

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