如何将JS生成的乘法结果ArrayList完整展示到HTML页面

问题原因 #

你代码中的result变量在for循环里每次都会被新的计算结果覆盖，循环结束后仅保存了最后一次i=5时的乘积，所以渲染到页面时只能显示最后一个值。

解决方案 #

用数组存储每次循环的计算结果，最后用join(',')方法把数组转成逗号分隔的字符串即可，修改后的代码如下：

function showData() {
  var theSelect = demoForm.part;
  var secondP = document.getElementById('secondP');
  // 初始化空数组存储所有计算结果
  var resultList = [];
  // 把获取到的选择值转为数字，避免字符串拼接异常
  var num = Number(theSelect[theSelect.selectedIndex].value);
  console.log("this is" + num)

  for (var i = 1; i <= 5; i++) {
    var result = i * num;
    // 将每次计算的结果推入数组
    resultList.push(result);
    console.log("List is" + result);
  }
  // 把数组转为逗号分隔的字符串
  var resultStr = resultList.join(',');
  // 修正原代码的拼写错误、空格遗漏问题
  secondP.innerHTML = 'Its Standard Pack is: ' + num + " we have to choose " + resultStr;
}

注：你给出的期望输出漏了数值6，上述代码运行后的正确输出为Its Standard Pack is: 2 we have to choose 2,4,6,8,10，如果确实需要跳过6的特殊逻辑，在循环中加对应判断条件过滤即可。

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