为何colorChange函数中span未定义？JavaScript跨函数调用问题咨询

你遇到的"span未定义"错误是作用域问题：colorChange函数里的span变量不存在于它的作用域中——showBall里的span是局部变量，只能在showBall内部访问，外部的colorChange根本拿不到它。

方案1：把span作为参数传入colorChange（推荐） #

这是最规范的做法，让函数的依赖显式化，避免隐式依赖带来的问题。修改代码如下：

function colorChange(standard, color, span) { // 新增span参数
  if (standard > 10) {
    span.style.color = color;
  }
}
const showBall = (number, $target) => {
  const span = document.createElement("span");
  span.className = "ball";
  span.innerHTML = lotto[number];
  colorChange(lotto[number], "red", span); // 传入span变量

  $target.append(span);
};

方案2：将colorChange定义在showBall内部 #

如果colorChange只需要在showBall里使用，可以把它放到showBall内部，这样就能直接访问内部的span变量：

const showBall = (number, $target) => {
  // 把colorChange移到showBall内部
  function colorChange(standard, color) {
    if (standard > 10) {
      span.style.color = color;
    }
  }

  const span = document.createElement("span");
  span.className = "ball";
  span.innerHTML = lotto[number];
  colorChange(lotto[number], "red");

  $target.append(span);
};

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