如何将颜色输入控件的取值存储到JavaScript字典中

云原生阿岚

2026-9-26

问题根因

事件回调属于异步触发逻辑，只有用户实际修改了颜色选择器的值、触发input事件后，Colors.input才会被赋值。如果在事件绑定完成后立刻访问Colors.input，此时事件还未触发，拿到的自然是初始的空字符串。
如果你的JS代码在DOM未完成加载时就执行，document.getElementById("colorPicker")会返回null，事件绑定直接失败，自然也不会更新属性值。

解决方案

先保证DOM加载完成后再执行JS逻辑，可把所有JS代码放到DOMContentLoaded回调中，或者直接放在</body>标签之前：

document.addEventListener('DOMContentLoaded', function() {
  var Colors = {
    "purple": "FF3CFF",
    "input": ""
  }    

  var colorInput = document.getElementById("colorPicker");
  colorInput.addEventListener("input", function(){
    Colors["input"] = colorInput.value.replace('#','');
  }, false);

  // 测试：修改颜色后点击页面任意位置，即可打印最新存储的颜色值
  document.addEventListener('click', function() {
    console.log('当前存储的颜色值：', Colors.input)
  })
})

如果需要颜色值更新后自动触发外部逻辑，将外部逻辑封装为函数，在事件回调内调用即可：

// 外部业务逻辑，可放在任意作用域下
function processColor(colorVal) {
  // 此处写后续处理逻辑，比如更新页面样式、提交数据等
  console.log('拿到最新颜色值：', colorVal)
}

document.addEventListener('DOMContentLoaded', function() {
  var Colors = {
    "purple": "FF3CFF",
    "input": ""
  }    

  var colorInput = document.getElementById("colorPicker");
  colorInput.addEventListener("input", function(){
    Colors["input"] = colorInput.value.replace('#','');
    // 回调内调用外部函数，传入最新值
    processColor(Colors["input"])
  }, false);
})