HTML/JavaScript调用函数输出undefined的原因及解决方法

• 核心问题为greeting()函数未显式声明返回值：JavaScript中没有写return语句的函数执行后默认返回undefined
• 单独运行代码时你直接调用greeting()仅查看控制台打印输出，无返回值使用逻辑，因此看起来运行正常；嵌入HTML后你将greeting()的返回值（也就是默认的undefined）拼接进了<h1>标签写入页面，因此页面显示undefined
• 控制台日志和页面渲染是两个独立的输出渠道，控制台打印的内容不会自动同步到页面中。

共有两种常用修复方式：

方式1：修改greeting函数返回要渲染的页面内容 #

调整函数逻辑，将原本打印到控制台的内容拼接为带HTML换行标签<br>的字符串返回，示例代码如下：

function greeting() {
  if (time === 'morning') {
    return `Good Morning!<br>
I love you!<br>
You're doing GREAT!<br>
Nice butt!`;
  } else if (time ==='afternoon') {
    return `Good afternoon!<br>
You're a genius!<br>
Just keep swimming!<br>
Progress not perfection!`;
  } else if (time === 'night') {
    return `Goodnight, Princess!<br>
Time for a nightcap.<br>
Sleep tight!<br>
Get NAKED!`;
  } else {
    return Array(4).fill("GO TF' TO SLEEP").join('<br>');
  }
}
// 原document.write逻辑保持不变即可正常渲染
document.write('<h1>' + greeting() + '</h1>');

方式2：将页面写入逻辑内置到greeting函数中 #

不需要依赖函数返回值，直接在函数内部完成内容拼接和页面写入操作：

function greeting() {
  let content = '';
  if (time === 'morning') {
    content = 'Good Morning!<br>I love you!<br>You\'re doing GREAT!<br>Nice butt!';
  } else if (time ==='afternoon') {
    content = 'Good afternoon!<br>You\'re a genius!<br>Just keep swimming!<br>Progress not perfection!';
  } else if (time === 'night') {
    content = 'Goodnight, Princess!<br>Time for a nightcap.<br>Sleep tight!<br>Get NAKED!';
  } else {
    content = Array(4).fill("GO TF' TO SLEEP").join('<br>');
  }
  document.write(`<h1>${content}</h1>`);
}
// 直接调用函数即可完成页面渲染
greeting();

内容的提问来源于stack exchange，提问作者xtina-t