JavaScript表单下拉选择切换body背景色功能失效求助

核心问题点 #

• 取值逻辑错位：下拉选项的value值是提前定义的CSS类名（如azure、champagne），并非可直接赋值给style.backgroundColor的合法CSS颜色值，直接将类名传给背景色属性时，浏览器无法识别非法值，样式不会生效
• 选择目标偏差：需求为修改页面主体（body）的背景色，现有代码选中的是页面内id为myDocument的div容器，即使样式生效也仅会修改该容器的背景，无法实现全页背景变色效果
• 已有样式未被触发：提前在<style>标签中编写的四个颜色类规则，没有对应的JS逻辑将其绑定到目标元素上，写好的样式完全未被调用

修正方案 #

调整JS逻辑，直接复用提前定义的CSS类实现背景切换，修正后的index.js代码参考：

// 等待DOM节点完全渲染后再绑定事件，避免脚本提前加载导致元素获取失败
document.addEventListener('DOMContentLoaded', () => {
  const changeBtn = document.getElementById('submit');
  changeBtn.addEventListener('click', () => {
    // 获取下拉框选中的类名
    const selectedClass = document.getElementById('pastelBgColor').value;
    // 先清除body上已挂载的所有颜色类，避免多类叠加的样式冲突
    document.body.classList.remove('azure', 'champagne', 'cotton-candy', 'tea-green');
    // 给body添加选中的对应颜色类
    document.body.classList.add(selectedClass);
  });
});

额外补充优化：如果希望背景色覆盖整个浏览器视口，可在原有样式中追加全局规则，避免页面内容较少时背景仅覆盖文字区域：

body {
  min-height: 100vh;
  margin: 0;
}

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