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> </p>
</div>