Automatically generating and display color code after pressing button [duplicate]

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
– Andreas, Commented Dec 4, 2021 at 9:57
@Andreas Yes I want hexadecimal value of the color and not the string. — Kikoanno
– Kikoanno, Commented Dec 4, 2021 at 10:20

Rickard Elimää · Accepted Answer · 2021-12-04 10:14:49Z

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>

Collectives™ on Stack Overflow

Automatically generating and display color code after pressing button [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related