javascript - 如何使用 Javascript 在屏幕上显示十六进制代码值？

Question

我正在创建一个颜色选择器 Web 应用程序，并且还想在屏幕上显示颜色的十六进制代码。我在 Javascript 中使用了 value 元素并且颜色正在挑选，但它没有显示十六进制颜色代码。

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;
    target.appendChild(colorArea);
});

});

这是我在 Web 应用程序中使用的 Javascript 代码。

标签： javascriptweb-applicationsdom-events

Answer 1

由于您没有提供任何 html，所以我假设有一个！我使用一些现代约定（如箭头函数模板字符串等）升级了 tge 代码……此外，还有一些错别字……

HTML

<label for="picker">
  <input type="color" name="" id="picker" value="" />
</label>

JS

  document.querySelectorAll('input[type=color]').forEach((picker) => {

    let 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; target.appendChild(colorArea);
    });

  });