Automatically generating and display color code after pressing button

Question

I have a button "White color" and I am curious how can I make the text under the button "#White" automatically generate after clicking on it and not be hardcoded as in the example I have below. For example showing as "#000000" after pushing the button.

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>

Can you add some clarification what your script is supposed to do? You want the `.innerText` to be the hexadecimal value of the color and not the string? Or something else? — Andreas, Dec 04 '21 at 09:57
@Andreas Yes I want hexadecimal value of the color and not the string. — Kikoanno, Dec 04 '21 at 10:20

score -1 · Answer 1 · answered Dec 04 '21 at 10:14

This answer still have hard coded hexadecimals, but in a different way that is easier to handle.

First of all, I changed your camelCase attributes to be kebab-cased instead, ex. data-colorCode --> data-color-code.

I also assigned (hard coded) values to data-butt-color for the white and black buttons.

The last thing I did were to querySelect all buttons, and then loop through the nodes to assign a click listener to each one of them, where I read the assigned data-butt-color or randomizing if there is no value. I also took the liberty of refactoring the code, in an attempt to make it more readable.

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>

Automatically generating and display color code after pressing button

1 Answers1