使用JavaScript修改input、页面背景及按钮颜色，现有代码不生效如何解决

DevOps 小满

2026-10-4

问题修复方案

核心问题说明

HTML存在重复ID冲突：下拉选择框和提交按钮都设置了id="bgchoice"，DOM规范要求ID全局唯一，会导致getElementById无法稳定获取到下拉框的选中值
原JavaScript逻辑仅修改了页面背景色，没有添加修改按钮样式的相关代码

修改后的完整代码

HTML部分

<section class="no-padding-bottom">
  <div class="container">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Change Colour</h5>
        <div class="form-group">
          <select id="bgchoice" name="colour" class="form-control">
            <option value="red">preset</option>
            <option value="cyan">Cyan</option>
            <option value="green">Green</option>
            <option value="pink">Pink</option>
            <option value="blue">Sea</option>
            <option value="violet">Violet</option>
          </select>
        </div>
        <div class="form-group">
          <!-- 修正重复ID，将按钮ID改为colorChangeBtn -->
          <input type="submit" name="changecolour" value="Change Colour" class="btn btn-primary" onclick="changeBG()" id="colorChangeBtn">
        </div>
        </form>
      </div>
    </div>
  </div>
</section>

JavaScript部分

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  // 修改页面背景色
  document.body.style.backgroundColor = selectedBGColor;
  // 获取按钮元素，同步修改按钮背景色
  var colorBtn = document.getElementById("colorChangeBtn");
  colorBtn.style.backgroundColor = selectedBGColor;
  // 适配按钮文字颜色，避免和背景色重合看不清
  const colorBrightnessMap = {
    red: 76,
    cyan: 179,
    green: 140,
    pink: 213,
    blue: 75,
    violet: 106
  }
  colorBtn.style.color = colorBrightnessMap[selectedBGColor] > 125 ? '#000' : '#fff';
}