Button1Element.onclick = function () => { Button2el.style.backgroundColor = "YourcolorCode" ; Button3el.style.backgroundColor = "YourcolorCode" ; Button4el.style.backgroundColor = "YourcolorCode" ; }

En primer lugar, haga esto, estoy seleccionando los botones con su nombre de clase.

 const button1 = document.querySelector('.button1'); const button2 = document.querySelector('.button2'); const button3 = document.querySelector('.button3'); const button4 = document.querySelector('.button4');

Ahora tienes todos los botones almacenados en variables. Después de esto, definiré una función y aquí usaré todos los botones almacenados en las constantes y luego diseñaré cada uno de los botones con un color de fondo diferente. Pero también asegúrese de agregar color blanco en el botón 2 donde el color de fondo es negro.

 function buttonColor() { button2.style.backgroundColor = 'black'; button2.style.color = 'white'; button3.style.backgroundColor = 'red'; button4.style.backgroundColor = 'yellow'; } button1.addEventListener('click' , buttonColor);

Si agrega ID de datos a los botones , usa clases de CSS y agrega los colores a una matriz, puede iterar sobre los botones cuando se ha hecho clic en un botón y volver a aplicar las clases a cada botón en el que no se ha hecho clic.

 const colors = ['black', 'red', 'yellow'] const buttons = document.querySelectorAll('button'); buttons.forEach(button => button.addEventListener('click', handleClick, false)); function handleClick() { // Get the id of the button const id = Number(this.dataset.id) - 1; // `color` maintains the index of // the colors in the array let color = 0; // Remove all classes from the clicked button this.className = ''; // Iterate over the buttons for (let i = 0; i < buttons.length; i++) { // If the current index doesn't match the button id // add the color from the array at the current `color` // and then increment `color` if (i !== id) { buttons[i].className = colors[color]; ++color; } } }

 .black { background-color: black; } .red { background-color: red; } .yellow { background-color: yellow; }

 <button data-id="1">One</button> <button data-id="2">Two</button> <button data-id="3">Three</button> <button data-id="4">Four</button>