Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

610
Visualizações
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 Respostas
Responde à pergunta

0

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

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda