I would like to know how to change the color of a button for 1 second and then return the original color automatically

Asked

Viewed 75 times

-3

I was able to change the color of the button at the beginning of the repetition, however I do not know how to return the original color to the end.

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)
javascript html css

  • You can’t help yourself without knowing what you really want to do. Why do you need to go back to the original color? What variable is notes? What does it get? Does it have any specific value for it? If smaller than both it turns red, larger it both turns standard color?

  • Friend try to improve your questions, instead of putting your doubt in the title, try to detail well what you want to do and in the title put only the topic, for example: "Change button color" ai in the content of the question you detail more, the way you’re doing makes it hard to help you.

2 answers

1

For this just empty the property background-color.

You can do this by adding a condition if before the if terminating the function:

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

That one if checks whether the variable i1 is greater than 1, that is, after 1 second of the interval, it will empty the property of the first button until the last one consecutively. See that I put i1-1 on the dial, which will cause when the timer will deal with the second button of id #2, will empty the background-color button #1, and so on to the button #15.

See example (I commented some lines that are not needed in the example):

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>

Tips:

  • Try to put ; at the end of the lines (see more information here).
  • Avoid unnecessary spaces in the value of properties. Instead of ' red ', use 'red'.
  • Avoid using id's that start with numbers. Instead of id="1", id="2" etc., could use id="b1", id="b2" etc. (read more here).

0

Your question has become very vague, but I will try to help you from what I understand, okay? Let’s go.

If your question was only to exchange for 1 second you can use an javascript called setTimeOut, he does something similar to the interval but it only fires once. and you can be writing your code like this:

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

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

Now if your question was to ask a fade between one element and another, then you will have to treat your element with loop to accomplish the effect, luckily we have the Jquery and Jqueryui, that when the two are imported, it becomes much simpler to work and you can write your code like this:

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

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

This makes it much easier to work with animation or the visual part in javascript

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.