why span is not defined in function

Question

I made a 'colorChange' function outside the 'showBall' function and i want to use 'colorchange' function inside the 'showBall' function but span is not defined..

function colorChange(standard, color) {
  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");

  $target.append(span);
};

Answer 1

It's not defined because you haven't defined it in that scope. you should pass on the span from the showBall function to colorChange as an argument:

function colorChange(standard, color, 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);

  $target.append(span);
};