十六进制颜色在javascript中无法正常工作[重复]答案

【问题标题】：hex colors not are not working correctly in javascript [duplicate]十六进制颜色在javascript中无法正常工作[重复]
【发布时间】：2021-08-31 23:41:04
【问题描述】：

我正在制作一个颜色转换器，以便在单击按钮时更改背景颜色和颜色名称。当我使用常规颜色名称数组时

arr = ["red" , "yellow", "blue" , "green" , "pink" , "lightBLue"]

它可以工作，但是当我使用十六进制颜色时

let arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6']

它不工作它只保持一种颜色#FF6633，

这里是html文件：

<body id="body">
    <p id="demo"></p>
    <button id="btn">Click Me</button>
    <script src="index.js"></script>
</body>

这里是js文件：

// let arr = ["red" , "yellow", "blue" , "green" , "pink" , "lightBLue"]

var arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

let colorName = document.getElementById("demo");
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    changeColorName();
    changeBackGroundColor();
});
colorName.innerText = arr[0]

 function changeColorName(){
    let change = colorName.innerHTML;
     let index = arr.indexOf(change) +1;
     if(index == arr.length){
         index = 0
     }
      
     var result = arr[index];
     colorName.innerHTML = result;
     
 }

let changeBgColor = document.getElementById("body");
changeBgColor.style.backgroundColor = arr[0]

function changeBackGroundColor() {
    let change = changeBgColor.style.backgroundColor;
    let index = arr.indexOf(change) + 1;
    if (index == arr.length) {
        index = 0
    }

    var result = arr[index];
    changeBgColor.style.backgroundColor = result;

}

这里是 js Fiddle https://jsfiddle.net/MuneebaDilawaze/ypnLowej/3/

【问题讨论】：

在let change = changeBgColor.style.backgroundColor; 之后添加console.log(change);，您会立即看到问题-然后使用stackoverflow.com/questions/1740700/… 的答案-我推荐2021 updated answer
您的 Hex 值由 JavaScript 自动转换为 rgb。查看其他StackOverflow thread，了解如何防止这种情况发生。
@AndrewL64 - 这是一个副本，指向我发布的那个：p
@JaromandaX 哦，哈哈，我现在才注意到它哈哈
更大的问题是这是一种糟糕的实现方式。与其每次都尝试从 html 中提取颜色，不如将索引存储在一个变量中，并且只写入 html。

标签： javascript colors

【解决方案1】：

HTMLElement.style.backgroundColor 返回一个 rgb 颜色值。您必须在查找它的索引之前对其进行转换。这是一个解决方案。

var arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

let colorName = document.getElementById("demo");
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    changeColorName();
    changeBackGroundColor();
});
colorName.innerText = arr[0]

 function changeColorName(){
    let change = colorName.innerHTML;
     let index = arr.indexOf(change) +1;
     if(index == arr.length){
         index = 0
     }
      
     var result = arr[index];
     colorName.innerHTML = result;
     
 }

let changeBgColor = document.getElementById("body");
changeBgColor.style.backgroundColor = arr[0]

function changeBackGroundColor() {
    let change = changeBgColor.style.backgroundColor;
    change = rgb2hex(change).toUpperCase();
    let index = arr.indexOf(change) + 1;
    if (index == arr.length) {
        index = 0
    }

    var result = arr[index];
    console.log(result);
    changeBgColor.style.backgroundColor = result;

}
const hexDigits = new Array
       ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body id="body">
    <p id="demo"></p>
    <button id="btn">Click Me</button>
    <script src="index.js"></script>
</body>
</html>

【讨论】：