1

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>

1
  • 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; } }); Commented el 5 mar. 2023 a las 11:59

1 respuesta 1

2
const buttonbar = document.querySelector('.button-bar');
buttonbar.addEventListener('click', function(event) 

Ese código de arriba asigna un evento al div cuya clase es button-bar, cuando tú lo que requieres es asignar el eventos a los botones. En otras palabras, el addEventListener debe ir a los botones (a cada uno), no al div.

Para eso debemos encontrar la lista de botones existentes dentro de button-bar, con:

const botones =  document.querySelectorAll(".button-bar > button")

Luego se recorre la lista y se asigna el evento

Aquí un ejemplo de código

const barra =  document.querySelector(".button-bar"); //Obtenemos la barra
const botones =  document.querySelectorAll(".button-bar > button"); //obtenemos una lista de botones

const clickColor = e => barra.style.backgroundColor= e.target.getAttribute("data-color"); //función que recive el evento click y cambia de color

botones.forEach(a=> a.addEventListener("click",clickColor)); //recorremos la lista de botones y asignamos al evento click la función que cambia de 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>

2
  • Muchas Gracias por la respuesta =) y por la ayuda voy a echarle un ojo al código y subsanar el error Commented el 5 mar. 2023 a las 19:47
  • @JoseLuisLópezCamins Recuerda marcar la respuesta como aceptada si es que fue de ayuda. Salduos
    – Yussef
    Commented el 6 mar. 2023 a las 3:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.