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

【问题标题】：How to display hex code value on screen using Javascript?如何使用 Javascript 在屏幕上显示十六进制代码值？
【发布时间】：2021-08-23 12:39:53
【问题描述】：

我正在创建一个颜色选择器 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 代码。

【问题讨论】：

标签： javascript web-applications dom-events

【解决方案1】：

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

HTML

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

  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);
    });

  });

【讨论】：