按下按钮后自动生成并显示颜色代码[重复]答案

【问题标题】：Automatically generating and display color code after pressing button [duplicate]按下按钮后自动生成并显示颜色代码[重复]
【发布时间】：2022-01-10 10:12:37
【问题描述】：

我有一个“白色”按钮，我很好奇如何使“#White”按钮下的文本在单击后自动生成，而不是像下面的示例中那样硬编码。例如按下按钮后显示为“#000000”。

const buttonColor = document.querySelector("[data-buttColor]");
const pEl = document.querySelector("[data-colorCode]");
const background = document.querySelector("[data-background]");

const buttonColorWhite = document.querySelector("[data-buttColorWhite]");
const buttonColorBlack = document.querySelector("[data-buttColorBlack]");

buttonColor.addEventListener("click", () => {
  let color = "#";
  color += Math.random().toString(16).slice(2, 8);
  background.style.backgroundColor = color;
  pEl.innerText = color;
  console.log(color)
})

buttonColorWhite.addEventListener("click", () => {
  let colorWhite = background.style.backgroundColor = "white";
  let color = "#white";
  pEl.innerText = color;
  console.log(color)

})

buttonColorBlack.addEventListener("click", () => {
  let colorWhite = background.style.backgroundColor = "black";
  let color = "#black";
  pEl.innerText = color;
  console.log(color)
})

<div class="text-center text-white animate__animated animate__flipInX">
  <button data-buttColor class="btn btn-primary btn-lg mt-3">Random color</button>
  <button data-buttColorWhite class="btn btn-primary btn-lg mt-3">White color</button>
  <button data-buttColorBlack class="btn btn-primary btn-lg mt-3">Black color</button>
  <p data-colorCode>The color is</p>
  <p data-background>&nbsp;</p>
</div>

【问题讨论】：

题外话：#000000 是黑色而不是白色
您能否添加一些说明您的脚本应该做什么？您希望.innerText 是颜色的十六进制值而不是字符串？还是别的什么？
@Andreas 是的，我想要颜色的十六进制值而不是字符串。

标签： javascript

【解决方案1】：

这个答案仍然有硬编码的十六进制，但以更容易处理的不同方式。

首先，我将您的 camelCase 属性更改为 kebab-cases，例如。 data-colorCode --> data-color-code.

我还为data-butt-color 分配了（硬编码）值用于白色和黑色按钮。

我做的最后一件事是查询选择所有按钮，然后循环遍历节点，为每个按钮分配一个点击侦听器，在那里我读取分配的data-butt-color，如果没有值则随机化。我还冒昧地重构了代码，以使其更具可读性。

const pEl = document.querySelector("[data-color-code]");
const background = document.querySelector("[data-background]");
const buttons = document.querySelectorAll('button');

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    let color = getColor(button.dataset.buttColor);
    displayColor(color);
  });
});

function getColor(color) {
  if (!color) {
    color = Math.random().toString(16).slice(2, 8);
  }

  return '#' + color;
}

function displayColor(color) {
  background.style.backgroundColor = color;
  pEl.innerText = `The color is: ${color}`;
}

<div class="text-center text-white animate__animated animate__flipInX">
  <button data-butt-color       class="btn btn-primary btn-lg mt-3">Random color</button>
  <button data-butt-color="fff" class="btn btn-primary btn-lg mt-3">White color</button>
  <button data-butt-color="000" class="btn btn-primary btn-lg mt-3">Black color</button>
  <p data-color-code>The color is:</p>
  <p data-background>&nbsp;</p>
</div>

【讨论】：