Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

615
Views
How to change the color of button with another button in Javascript

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

code

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Button1Element.onclick = function () => {
  Button2el.style.backgroundColor = "YourcolorCode" ;
  Button3el.style.backgroundColor = "YourcolorCode" ;
  Button4el.style.backgroundColor = "YourcolorCode" ;
}
about 4 years ago · Juan Pablo Isaza Report

0

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);
about 4 years ago · Juan Pablo Isaza Report

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!