Tengo este html y abajo el script, pero no sé cómo hacer para que al clicar sobre cada botón se ponga del color de fondo seleccionado, se hacerlo en el botón, pero me lio muchísimo. Podrías echarme un mano, ya que estoy aquí practicando sobre tus clases y estoy atascado en esta actividad:
Usando el concepto de EVENT BUBBLING, cada vez que clicas en un botón, el background color del elemento "button-bar" se pone del mismo color que el atributo data-color del boton que clicaste
EJEMPLO: si clicas en el botón Green, el background color del "button-bar" será "green" (porque data-color:"green")
Si clicas en el boton Purple, el background color del "button-bar" será "purple" (porque data-color="purple" Podéis echarme un clave un cordial saludo
Esto es lo que he intentado:
const buttonbar = document.querySelector('.button-bar');
buttonbar.addEventListener('click', function(event) {
const target = event.target;
if (target.tagname ==='button') {
var color = event.target.getAttribute('data-color');
buttonbar.style.backgroundColor = color;
}
});
<div class="button-bar">
<button data-color="red">Red</button>
<button data-color="yellow">Yellow</button>
<button data-color="green">Green</button>
<button data-color="purple">Purple</button>
</div>