JavaScript出现‘color变量未定义’错误，请求排查解决

核心错误点 #

• 'color未定义'错误原因：styleAndCelebrate函数未声明参数，调用时传入的参数无法被内部的consoleStyler和celebrateStyler获取，导致内部引用的color等变量无定义。
• 未定义变量引用：celebrateStyler的else分支中使用的message和style仅存在于consoleStyler函数作用域内，跨作用域调用会触发错误。
• console样式使用错误：consoleStyler中单独打印style和message无法实现样式效果，需将两者作为参数传入同一次console.log。

修复后的完整代码 #

function consoleStyler(color, background, fontSize, txt) {
  var message = "%c" + txt;
  var style = `color: ${color};`
  style += `background: ${background};`
  style += `font-size: ${fontSize};`
  console.log(message, style); // 合并样式与消息打印
}

function celebrateStyler(reason) {
  var fontStyle = "color: tomato; font-size: 50px";
  if (reason == "birthday") {
    console.log(`%cHappy birthday`, fontStyle);
  } else if (reason == "champions") {
    console.log(`%cCongrats on the title!`, fontStyle);
  } else {
    console.log(`%cDefault message`, fontStyle); // 替换未定义变量的引用，使用默认样式消息
  }
}

consoleStyler('#1d5c63', '#ede6db', '40px', 'Congrats!');
celebrateStyler('birthday');

function styleAndCelebrate(color, background, fontSize, txt, reason) { // 声明所需参数
  consoleStyler(color, background, fontSize, txt);
  celebrateStyler(reason);
}
styleAndCelebrate('ef7c8e', 'fae8e0', '30px', 'You made it!', 'champions');

修复细节说明 #

1. styleAndCelebrate函数参数声明：添加color, background, fontSize, txt, reason参数，确保调用时传入的值能被内部函数正确接收。
2. consoleStyler打印逻辑修正：将console.log(style);和console.log(message);合并为console.log(message, style);，这是浏览器控制台识别%c样式标记的正确方式。
3. celebrateStyler else分支修复：移除对未定义变量message和style的引用，替换为使用已定义的fontStyle打印默认消息，避免变量未定义错误。

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