ReferenceError：颜色未定义答案

【问题标题】：ReferenceError: color is not definedReferenceError：颜色未定义
【发布时间】：2022-10-24 14:50:14
【问题描述】：

我正在学习函数式编程的概念，遇到了一个让我很难过的练习。当我在任务 4 中调用 consoleStyler() 时，它给了我一个参考错误：颜色未定义。我按照课程中的分步说明获取此当前代码，并自己玩弄它，但我似乎无法满足错误。有人可以向我解释为什么我会收到这个错误吗？我真的很想了解我做错了什么。

// Task 1: Build a function-based console log message generator
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);
}

// Task 2: Build another console log message generator
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(message, style);
    }
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions
consoleStyler('#1d5c63', '#ede6db', '4px', 'Congrats!');
celebrateStyler('birthday');

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate() {
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e', 'fae8e0', '30px', 'You made it!', 'Champions')

【问题讨论】：

在styleAndCelebrate 函数中，这些变量不存在。你的意思是输入你自己的输入吗？
如果您在函数 3 中有函数 1 和函数 2，那么您需要将所有参数发送到函数 3。这样您就可以根据需要在函数 1 和 2 中使用这些参数

标签： javascript

【解决方案1】：

我已将consoleStyler 和celebrateStyler 函数与styleAndCelebrate() 中的输入参数一起移动。它之前不起作用的原因是由于范围，styleAndCelebrate() 不知道其函数内参数的值。希望这可以帮助。

// Task 1: Build a function-based console log message generator
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);
}

// Task 2: Build another console log message generator
function celebrateStyler(reason, txt) {
  var message = "%c" + txt;
  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(message, fontStyle);
  }
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions


// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate() {
  consoleStyler('#1d5c63', '#ede6db', '4px', 'Congrats!');
  celebrateStyler('champions');
}
// Call styleAndCelebrate
styleAndCelebrate();

【讨论】：

现在这是有道理的！看到这一点并理解它让我质疑我正在学习的课程材料的有效性。我按照这些步骤复制并粘贴了所有可能的内容，以确保最终结果完全相同。谢谢你的崩溃！对此，我真的非常感激。

【解决方案2】：

您的问题是您的代码正在尝试使用尚未声明的变量。

第一个错误在任务 2 中，最后一个 else 尝试使用不存在的变量“消息”和“样式”进行记录。我认为这是来自练习，而您只是忘记像在其他条件下那样更新那些。

另一个错误出现在任务 4 中。当您执行任务 4 时，您传递了 5 个值，但任务 4 的函数声明不包含任何这些输入变量。

任务 4 应如下所示才能工作：

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason) {
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}

【讨论】：

【解决方案3】：

// Task 1: Build a function-based console log message generator
function consoleStyler(color, background, fontSize, txt) {
  let message = "%c" + txt;
  let style = `color: ${color};`
  style += `background: ${background};`
  style += `font-size: ${fontSize};`
  console.log(message, style);
}

// Task 2: Build another console log message generator
function celebrateStyler(reason) {
   let 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 {
      consoleStyler();
  }
    
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions
consoleStyler('#1d5c63', '#ede6db', '40px', 'Congrats!');
celebrateStyler('birthday');

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason) {
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e','fae8e0','30px','You made it!','champions');

【讨论】：