更改 div 的背景顏色一段時間

Question

我是編程新手，所以我想知道如何在幾秒鍾內更改單擊事件時的 div 容器背景顏色，然后使用 javascript 自動恢復？

<div data-key="65" onclick=play(this.id) id="1">
     <kbd>A</kbd>
     <span>SNARE</span>
</div>

function play(id){
    document.div.addEventListener('click', function(e){
    var self = this,
    old_bg = this.style.background;

this.style.background = this.style.background=='green'? 'blue':'green';
setTimeout(function(){
    self.style.background = old_bg;
}, 1000);
})


if(id==="1"){
  var audio = new Audio("https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/snare.wav")
  audio.play();

}

Answer 1

你能試試這個嗎：

 document.getElementById("example").addEventListener("click", function(e) { var element = e.target; var oldColor = element.style.backgroundColor; var newColor = oldColor === "black" ? "green" : "black"; element.style.backgroundColor = newColor; setTimeout(function() { element.style.backgroundColor = oldColor; }, 1000) })

 #example { width: 50px; height: 50px; display: block; cursor: pointer; }

 <div id="example" style="background-color: black;"> </div>