0

Quiero que cada boton cambie de color de forma indivual. Existe alguna forma de hacerlo sin que tener que hacer un codigo para cada id? tambien me sirve saber si se puede lograr teniendo la misma clase o id en cada boton

<button id="btn-1" style="background-color: salmon;">Button</button>
<button id="btn-2" style="background-color: salmon;">Button</button>
<button id="btn-3" style="background-color: salmon;">Button</button>
<button id="btn-4" style="background-color: salmon;">Button</button>
const btn = document.getElementById('btn-1');

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = btn.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    btn.style.backgroundColor = 'green';
  } else if (backgroundColor === 'green') {
    btn.style.backgroundColor = 'purple';
  } else {
    btn.style.backgroundColor = 'purple';
  }
});
1
  • 1
    mismo id no es conveniente ( cualquier cosa que busque por id va a encontrar el primero nomas ) id viene de identidad e identifica cada elemento, misma clase si por que los agrupa en la misma clase de boton y cada uno mantiene su identidad. Commented el 10 oct. 2023 a las 21:23

1 respuesta 1

1

hay que encontrar lo que diferencia un boton de otro y a partir de ahí decidir qué cambio corresponde a cada botón, según alguna tabla o array de correspondencia.

Por ejemplo: usando el estilo al momento de hacer click y mediante un array asociativo que indica qué color cambia a qué otro color

// buscar todos 
// los botones (button) 
// cuyo id empieza con ( [id^= ) 
// el string 'btn-'
const botones = document.querySelectorAll("button[id^='btn-']");
const colores = {
  'salmon': 'red',
  'red': 'green',
  'green': 'blue',
  'blue': 'cyan',
  'cyan': 'magenta',
  'magenta': 'yellow',
  'yellow': 'salmon'
}

// por cada uno de los botones encontrados
botones.forEach((b) => {
  // agregar una escucha de evento click
  b.addEventListener('click', (ev) => {
    // el boton es el destino (target) del click
    let btn = ev.target

    // tomamos el color actual
    let colorActual = btn.style.backgroundColor
    // obtenemos el nuevo color del array de colores segun el index
    let colorNuevo = colores[colorActual]
    // aplicamos color
    btn.style.backgroundColor = colorNuevo
    console.log(`${btn.id} ${colorActual} -> ${colorNuevo}`)

  })
})
<button id="btn-1" style="background-color: salmon;">Button</button>
<button id="btn-2" style="background-color: salmon;">Button</button>
<button id="btn-3" style="background-color: salmon;">Button</button>
<button id="btn-4" style="background-color: salmon;">Button</button>

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.