I have 4 button and i want with one of the button change the background color of the other button.
For example : when i click button 1 , then button 2 and 3 and 4 change their color to black and red and yellow
Button1Element.onclick = function () => {
Button2el.style.backgroundColor = "YourcolorCode" ;
Button3el.style.backgroundColor = "YourcolorCode" ;
Button4el.style.backgroundColor = "YourcolorCode" ;
}
First of all do this, I am selecting the buttons with their class name.
const button1 = document.querySelector('.button1');
const button2 = document.querySelector('.button2');
const button3 = document.querySelector('.button3');
const button4 = document.querySelector('.button4');
Now you have all the buttons stored in variables. After this I will define a function and here I will use all the button stored in the constants and I will then style each of the button with different background color. But also make sure to add color white in the button2 where the color of background is black.
function buttonColor() {
button2.style.backgroundColor = 'black';
button2.style.color = 'white';
button3.style.backgroundColor = 'red';
button4.style.backgroundColor = 'yellow';
}
button1.addEventListener('click' , buttonColor);
If you add data ids to the buttons, use CSS classes, and add the colors to an array, you can iterate over the buttons when a button has been clicked, and reapply the classes to each button that hasn't been clicked.
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>