如何使用Javascript在页面上显示颜色选择器对应的hex十六进制色值

你的代码存在以下几处错误，直接导致hex色值无法正常显示：

• document.createElement(span) 中，span是HTML标签名，需要作为字符串传入添加引号改为'span'，否则会被识别为未定义变量触发报错。
• JavaScript属性大小写敏感，取色器的取值属性是小写的value，你写的大写Value无法读取到正确的色值。
• 匹配label的选择器中，for=" 引号后多了一个多余空格，会导致无法匹配到对应id的label元素，target变量为null后续操作无法执行。
• 无需在每次change事件触发时重复执行appendChild操作，元素只需要在初始化时添加一次即可，重复调用会导致页面不断追加多余的色值展示元素。

修复后的完整代码如下：

document.querySelectorAll('input[type=color]').forEach(function(picker){
  var target = document.querySelector('label[for="' + picker.id + '"]'),
      colorArea = document.createElement('span');

  colorArea.innerHTML = picker.value;
  target.appendChild(colorArea);

  picker.addEventListener('change' , ()=>{
    colorArea.innerHTML = picker.value;
  });
});

内容的提问来源于stack exchange，提问作者Haider Abbas Abidi