-3

consegui mudar a cor do botão no inicio da execução da repetição, entretanto não sei como fazer o botão voltar a cor original ao final.

let interval = setInterval(function () {
  if (i1 > 15) {
    return clearInterval(interval)
  }

  document.getElementById(i1).style.backgroundColor = ' red '

  if (notas1[i1] === 1) {
    C_Teclado.play();
  } else if (notas1[i1] === 2) {
    CS_Teclado.play();
    console.log("2");
  } else if (notas1[i1] === 3) {
    D_Teclado.play();
    console.log("3");                    
  } else {
    SomVazio.play();
    console.log("13");
  }
    i1++
}, 1000)
2
  • Não dá pra te ajudar sem saber o que realmente quer fazer. Por que precisa voltar a cor original? Que variável é notas? O que ela recebe? Tem algum valor especifico para ela? Se menor que tanto ela fica vermelha, maior que tanto fica cor padrão?
    – Azzi
    Commented 20/02/2020 às 20:24
  • Amigo tente melhorar suas perguntas, no lugar de colocar sua dúvida no título, tenta detalhar bem o que você quer fazer e no título coloque apenas o tópico, por exemplo: "Alterar cor de botão" ai no conteúdo da pergunta você detalha mais, do jeito que está fazendo fica difícil te ajudar.
    – Kayo Bruno
    Commented 28/02/2020 às 16:44

2 Respostas 2

1

Para isso basta esvaziar a propriedade background-color.

Você consegue fazer isso adicionando uma condição if antes do if que finaliza a função:

if(i1 > 1){
   document.getElementById(i1-1).style.backgroundColor = '';
}

Esse if verifica se a variável i1 é maior que 1, ou seja, após 1 segundo do intervalo, irá esvaziar a propriedade do primeiro botão até o último consecutivamente. Veja que coloquei i1-1 no seletor, que fará com que quando o temporizador for tratar do segundo botão de id #2, irá esvaziar o background-color do botão #1, e assim até o botão #15.

Veja exemplo (comentei algumas linhas que não são necessárias no exemplo):

let i1 = 1;
let interval = setInterval(function () {
   if(i1 > 1){
      document.getElementById(i1-1).style.backgroundColor = '';
   }

   if (i1 > 15) {
      return clearInterval(interval);
   }

   document.getElementById(i1).style.backgroundColor = 'red';

//     if (notas1[i1] === 1) {
//         C_Teclado.play();
//
//     } else if (notas1[i1] === 2) {
//         CS_Teclado.play();
//         console.log("2");
//     } else if (notas1[i1] === 3) {
//         D_Teclado.play();
//         console.log("3");                    
//     } else {
//         SomVazio.play();
//         console.log("13");
//
//     }


     i1++;
 }, 1000);
<button id="1">Botão 1</button>
<button id="2">Botão 2</button>
<button id="3">Botão 3</button>
<button id="4">Botão 4</button>
<button id="5">Botão 5</button>
<button id="6">Botão 6</button>
<button id="7">Botão 7</button>
<button id="8">Botão 8</button>
<button id="9">Botão 9</button>
<button id="10">Botão 10</button>
<button id="11">Botão 11</button>
<button id="12">Botão 12</button>
<button id="13">Botão 13</button>
<button id="14">Botão 14</button>
<button id="15">Botão 15</button>

Dicas:

  • Procure colocar ; no final das linhas (veja mais informações aqui).
  • Evite espaços desnecessários no valor das propriedades. Em vez de ' red ', use 'red'.
  • Evite usar id's que se iniciam com números. Em vez de id="1", id="2" etc., poderia usar id="b1", id="b2" etc. (saiba mais aqui).
0

Sua pergunta ficou muito vaga, mas eu vou tentar te ajudar pelo o que eu entendi, ok? vamos lá.

Se sua pergunta foi apenas trocar por 1 segundo você pode utilizar um evento do javascript chamado setTimeOut, ele faz uma coisa parecida com o interval porem ele dispara apenas uma unica vez. e você pode esta escrevendo seu código assim:

document.getElementById('i1').style.backgroundColor = ' red ';

setTimeout(function(){ 
  document.getElementById('i1').style.backgroundColor = ' blue ';
}, 1000);

Agora se sua pergunta foi fazer um fade entre um elemento e outro, ai você vai ter que tratar seu elemento com loop para realizar o efeito, por sorte nós temos a API do Jquery e JqueryUI, que quando as duas são importadas, fica muito mais simples de trabalhar e você pode escrever seu código assim:

$('#i1').stop();

$('#i1').css({"background": 'red'}, 1000, function(){
  $('#i1').css({"background": 'blue'});
});

Assim fica muito mais fácil para trabalhar com animação ou a parte visual em javascript

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .