Tengo un botón "Color blanco" y tengo curiosidad de cómo puedo hacer que el texto debajo del botón "#Blanco" se genere automáticamente después de hacer clic en él y no esté codificado como en el ejemplo que tengo a continuación. Por ejemplo, mostrando como "#000000" después de presionar el botón.
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>Esta respuesta todavía tiene hexadecimales codificados, pero de una manera diferente que es más fácil de manejar.
En primer lugar, cambié los atributos de camelCase para que en su lugar estén envueltos en kebab, ej. código-color- data-colorCode --> data-color-code .
También asigné valores (codificados) a data-butt-color para los botones blanco y negro.
Lo último que hice fue consultarSeleccionar todos los botones y luego recorrer los nodos para asignar un detector de clics a cada uno de ellos, donde leo el data-butt-color asignado o la aleatorización si no hay ningún valor. También me tomé la libertad de refactorizar el código, en un intento de hacerlo más legible.
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> </p> </div>