JS函数控制台调用与点击事件触发执行结果不一致问题求解

问题原因 #

• 核心触发差异：displaySuperIncreasingSequence 作为点击事件回调时，浏览器会默认将事件对象（Event）作为第一个参数传入，直接覆盖了你设置的 length=7 默认值。事件对象不是合法数字，传入superIncreasingSequence后循环条件判定异常，最终生成的数组只有初始的1个元素，所以仅显示单个数字。你手动在控制台调用时没有传参，使用的是默认值7，因此运行正常。
• 代码本身的隐藏错误：你写的arraySum函数缺少返回语句，也没有闭合花括号。正常执行时该函数默认返回undefined，计算累加和会出现类型错误；同时getRandomInt被定义在了arraySum内部，全局作用域无法访问会触发引用报错。你控制台调用正常大概率是之前测试时已经在全局遗留了可用的函数定义。
• 额外风险点：sequence、sequenceSum 没有加let/const声明，属于隐式全局变量，容易出现变量污染导致的不可预期异常。

修复代码 #

// 补全arraySum的闭合花括号和返回逻辑
function arraySum(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
     sum += array[i];
  }
  return sum;
}

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function superIncreasingSequence(length = 7) {
  // 补充变量声明
  let sequence = [getRandomInt(10) + 1];
  for (let i = 0; i < length; i++) {
    // 补充变量声明
    let sequenceSum = arraySum(sequence);
    sequence.push(sequenceSum + getRandomInt(10));
  }
  return sequence;
}

function displaySuperIncreasingSequence(length = 7) {
  let sequence = superIncreasingSequence(length)
  document.getElementById("superIncreasingSequenceGeneratorResult").innerText = sequence;
}

const superIncreasingSequenceGeneratorBtn = document.getElementById("superIncreasingSequenceGenerator");
// 回调包裹匿名函数，手动不传参调用，避免事件对象覆盖length参数
superIncreasingSequenceGeneratorBtn.addEventListener("click", () => {
  displaySuperIncreasingSequence()
});

<button id="superIncreasingSequenceGenerator" type="button">Generate Sequence</button>
<div id="superIncreasingSequenceGeneratorResult">""</div>

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