为何我的JavaScript函数makeupclass1无法运行？

我正在尝试用HTML和JS制作一款简单的换装小游戏，但不清楚为什么makeupclass1函数无法正常运行。window.onload事件能够正常打印日志，然而makeupclass1函数毫无反应。我刚入门编程，抱歉如果这是个低级错误。我已经用多个代码验证工具检查过，没有发现问题。我试过改用className属性，也试过将函数直接写在onclick事件中，但都没有效果。

以下是我的代码：

JS代码 #

window.onload = (event) => {
  console.log("page is fully loaded");
};

function makeupclass1() {
  document.getElementById('makeup').setAttribute("class", "makeup1");
  console.log("makeup changed");
}

CSS代码 #

#makeup {
  width: 720px;
  height: 1280px;
  background-size: cover;
  position: absolute;
}

.makeup1 {
  background-image: url('img/makeup1.png');
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div id="makeup"></div>
  <button onclick="makeupclass1()">option 1</button>
</body>
</html>

问题原因与解决方案 #

核心问题是你的HTML文件没有正确引入JS和CSS代码，浏览器无法识别makeupclass1函数，也无法加载样式。

修正步骤： #

1. 内嵌代码方式：将JS和CSS直接嵌入到HTML中，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    #makeup {
      width: 720px;
      height: 1280px;
      background-size: cover;
      position: absolute;
      /* 添加默认背景色，方便直观看到元素 */
      background-color: #eee;
    }

    .makeup1 {
      background-image: url('img/makeup1.png');
    }
  </style>
</head>

<body>
  <div id="makeup"></div>
  <button onclick="makeupclass1()">option 1</button>

  <script>
    window.onload = (event) => {
      console.log("page is fully loaded");
    };

    function makeupclass1() {
      // 用className更直观，效果和setAttribute一致
      document.getElementById('makeup').className = "makeup1";
      console.log("makeup changed");
    }
  </script>
</body>
</html>

2. 外部文件引入方式：如果JS和CSS是单独文件（比如script.js、style.css），需要在HTML中添加引用：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="makeup"></div>
  <button onclick="makeupclass1()">option 1</button>

  <!-- JS放在body末尾，确保DOM元素加载完成后再执行 -->
  <script src="script.js"></script>
</body>
</html>

额外检查点： #

• 确认img/makeup1.png的路径正确，图片文件确实存在于对应位置。
• 打开浏览器控制台（F12），查看是否有报错信息（比如文件找不到、函数未定义等），这是排查前端问题的关键手段。

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