How To Change Color Of The Background In Table Cell For Two Seconds? And Go Back To Default

In the below javaScript code: function webSocketStart() { //onclick() of a button document.getElementById('button').disabled = true; var ws

Solution 1:

You can just use sleep function with the seconds inside like sleep(2) for 2 seconds Is it what's you want

Solution 2:

You're already getting the element so you would add a class in JS like this: el.classList.add('className'); Then you need to set a timer setInterval(function, milliseconds) that removes the class after a set amount of time. The CSS will then revert back to default. I added a CSS transition to the color so it's not as jarring when it changes.

(click handler is just for the example)

var removeClass = function(targ){
  if(targ.classList.contains('highlight')){
    targ.classList.remove('highlight');
  }
}

document.getElementById('myEl').addEventListener('click', function () {
  var myEl = this
  myEl.classList.add('highlight');
  var myTimer = setInterval(function(){removeClass(myEl)},2000);
});

#myEl {
      width: 30px;
      height: 30px;
      margin: 10px;
      
      background-color: aqua;
      transition: background 0.25s ease;
      
     }
     
#myEl.highlight {
      background-color: orange;
     }

<divid='myEl'></div>

Click the box to activate the timer