嘿，我来帮你拆解下你的代码为什么不工作，以及怎么快速修复它！

核心问题点 #

你的代码失效主要有三个关键错误：

• ID冲突导致关联失败：你给input和datalist都用了color-test这个ID，这完全不对！input的list属性是用来指定它关联的datalist的ID，所以两者的ID必须不一样，浏览器才能正确识别哪个datalist属于这个input。
• 逻辑方向搞反了：你写的代码是把test元素的背景色赋值给input的value，但你的需求明明是把用户选择的颜色（来自input/datalist）赋值给test的背景色，这完全是反向操作了！
• 颜色格式不兼容：通过element.style.backgroundColor获取到的颜色是rgb(r,g,b)格式，但type="color"的input只接受十六进制格式（比如#ff0000），就算逻辑写对了，格式不匹配也会出问题。

修正后的完整代码 #

HTML部分（先解决ID冲突） #

<div id="test">Pick a color for the background of this element</div>
<!-- 给input单独设ID，list属性指向datalist的ID -->
<input id="color-picker" list="color-options" type="color">
<datalist id="color-options">
  <option value="#ff0000">
  <option value="#0000ff">
  <option value="#008000">
</datalist>
<button onclick="setElementBackgroundColor()">Set Background Color</button>

JavaScript部分（修正逻辑方向） #

function setElementBackgroundColor() {
  // 先获取用户在input里选择的颜色值（包括从datalist选的）
  const chosenColor = document.getElementById("color-picker").value;
  // 把颜色赋值给test元素的背景色
  document.getElementById("test").style.backgroundColor = chosenColor;
}

额外优化：实时生效（无需点击按钮） #

如果想让用户选完颜色立刻看到效果，不用点按钮，可以给input加个input事件监听，这样选色的时候实时更新：

// 页面加载完成后绑定事件
document.addEventListener("DOMContentLoaded", function() {
  const colorPicker = document.getElementById("color-picker");
  colorPicker.addEventListener("input", function() {
    document.getElementById("test").style.backgroundColor = this.value;
  });
});

补充说明 #

你不需要直接操作datalist元素，因为datalist只是给input提供预设选项，用户选择的最终值是存在input的value属性里的，直接获取input的value就足够了。

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