JavaScriptのaddEventListenerを使って背景色を一瞬だけ変えるコードを教えてください

いつもお世話になっています。下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

index.htmlにdivタグがあります。そのdivタグはピンク色の背景をしたボックスになっています。JavaScriptを用いて、ボックスをクリックしたときに一瞬だけオレンジに変更するためにはどうすれば良いでしょうか？

【質問の補足】

1. プログラムの仕様について

今回の質問はドットインストールが主催しているイベントの仕様にもとづき投稿しました。
JavaScriptで『3つの箱』に動きを付けてみよう｜256times｜note

2. コードについて

仕様を満たすために自分が記述したHTML/CSS/JSファイルは以下の通りです。

JavaScript (js/main.js)

背景色を切り替えるためのJavaScriptコードについて以下の通り記述しています。

"use strict"; 
{
  const box1 = document.getElementById('box1');
  const box2 = document.getElementById('box2');
  const box3 = document.getElementById('box3');
  let i = 0

  function styleBackground() {
    box1.style.background = 'orange';
    if (ox1.style.background === 'orange') {
      // backgroundが'orange'であれば'pink'に戻す
　　　 box1.style.background = 'pink';
    }
  }

  box1.addEventListener('click', () => {
    styleBackground();
  }); 

  box2.addEventListener('click', () => {
    box2.textContent = i++;
  });

  box3.addEventListener('click', () => {
    box3.textContent = Math.floor(Math.random() * 6) + 1;
  });
}

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <div id="box1">Hello</div>
    <div id="box2">1</div>
    <div id="box3">Dice!</div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS(css/style.css)

#container {
  display: flex;
}

#box1 {
  background: pink;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  text-align: center;
  line-height: 96px;
  user-select: none;
}

#box2 {
  background: pink;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  text-align: center;
  line-height: 96px;
  user-select: none;
}

#box3 {
  background: pink;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  text-align: center;
  line-height: 96px;
  user-select: none;
}

3. そのほか

3週間ほど前にスタック・オーバーフローでも同様の質問をしましたが、まだ回答を得られないためこちらで質問をさせていただきました。そのURLは以下の通りです。

https://ja.stackoverflow.com/questions/62775/javascript%e3%81%aeaddeventlistener%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e8%83%8c%e6%99%af%e8%89%b2%e3%82%92%e4%b8%80%e7%9e%ac%e3%81%a0%e3%81%91%e5%a4%89%e3%81%88%e3%82%8b%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e6%95%99%e3%81%88%e3%81%a6%e3%81%8f%e3%81%a0%e3%81%95%e3%81%84

以上、ご確認のほどをよろしくお願い申し上げます。

Lhankor_Mhy

2020/02/27 08:00

ご存知かと思いますが。 https://teratail.com/help#posted-otherservice

m.ts10806

2020/02/27 08:10

「一瞬」とは具体的に何秒でしょうか

echizeyayota

2020/02/27 08:10

Lhankor_Mhy さん。コメントありがとうございます。「他のサービスにも質問投稿をしたい（してしまった）」に関するルールがあること自体、知りませんでした。スタック・オーバーフローで投稿した質問のURLを分かりやすく貼っておきました。今後気を付けます。どうぞよろしくお願いします。

echizeyayota

2020/02/27 08:12 編集

m.ts10806 さん。コメントありがとうございます。 >具体的に何秒でしょうか 1000ミリ秒を想定しています。よろしくお願いします。

Lhankor_Mhy

2020/02/27 08:33

とりあえず、 if (ox1.style.background === 'orange') { はtypoだと思います。あと、全角スペースが混じっています。環境によってはエラーになるかもしれませんので、除去しておくことをお勧めします。

echizeyayota

2020/02/29 04:52

ご指摘ありがとうございます。タイポを修正しておきました。

行動規範の内容に同意します

回答4件

一瞬だけ

【WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

投稿2020/02/27 08:14

kei344

総合スコア69398

echizeyayota

2020/02/29 04:40

kei344 さん。コメントありがとうございます。setTimeout()を使って意図通りの動作をさせることできました。今後ともどうぞよろしくお願いします。 http://teratail.com/questions/243848?modal=r-comp&reply=true#reply-354123

行動規範の内容に同意します

マウスダウンで動いているように見えたので

HTML
1    <div id="box1" tabindex="0">Hello</div>

CSS
1#box1:active {
2  background: orange;
3}

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/ja/docs/Web/CSS/:active

投稿2020/02/28 05:19

x_x

総合スコア13749

echizeyayota

2020/02/29 04:45

x_x さん。コメントありがとうございます。教えていただいたHTMLとCSSのコードを試してみると、意図通りの動作ができました。今後ともどうぞよろしくお願いします。 https://github.com/echizenyayota/256times/commit/4b82ee3a4cf8822576efbbadfd34b41b969e2691#diff-961bae4b7d40c090f241c1aea894dafa

行動規範の内容に同意します

スマホからなので簡単に。

cssでanimateしたら？

HTML
1<div class="box"></div>

CSS
1.box{
2  animation: flash 1s linear ;
3  width:50px;
4  height:50px;
5  background:pink;
6  margin:20px;
7}
8
9@keyframes flash {
10  0% {
11    background:orange;
12  }
13
14  99% {
15   background:orange;
16  }
17  
18  
19  100% {
20    background:pink;
21  }
22}
23
24

投稿2020/02/27 08:47

編集2020/02/29 05:28

oikashinoa

総合スコア2826

echizeyayota

2020/02/29 04:50

oikashinoa さん。コメントありがとうございます。CSSでanimateする方法もあるんですね。初めて知りました。今後の参考とさせていただきます。これからもどうぞよろしくお願いします。 https://developer.mozilla.org/ja/docs/Web/CSS/animation

oikashinoa

2020/02/29 05:26

遅くなりました。 @keyframesとanimation（繰り返しは1回のみ）で実現できますよ。簡単ですがソースを載せときます。クリックイベント時にCSSをセットすれば、CSS側で自動的に色をオレンジ→ピンクにします

echizeyayota

2020/03/01 02:22

oikashinoa さん。コードの紹介ありがとうございました。教えていただいたコメントを試してみました。「このような書き方もあるんだ！」と思い驚きました。今後の参考とさせていただきます。 https://github.com/echizenyayota/256times/blob/developer_4/20200204/css/style.css

oikashinoa

2020/03/01 02:38

今回のケースはシンプルなのでJavaScriptでも良いですが、複雑なものになるとCSSに任せたほうがスムーズに動くし CPU負荷も下がりますよ。（JavaScriptに任せたほうが楽なケースも有りますが）色々ためして頑張って下さい。

行動規範の内容に同意します

自己解決

setTimeout()を使って自己解決できました。下記のコードで質問で述べた仕様を満たすことができました。


"use strict"; 
{
  const box1 = document.getElementById('box1');
  const box2 = document.getElementById('box2');
  const box3 = document.getElementById('box3');
  let i = 0

  function styleBackgroundOrange() {
    box1.style.background = 'pink';
    setTimeout(styleBackgroundOrange, 1000);
  }

  box1.addEventListener('click', () => {
    styleBackgroundOrange();
    box1.style.background = 'orange';
  }); 

  box2.addEventListener('click', () => {
    box2.textContent = i++;
  });

  box3.addEventListener('click', () => {
    box3.textContent = Math.floor(Math.random() * 6) + 1;
  });
}

コメントをしてくださったみなさま。アドバイスありがとうございました！

投稿2020/02/29 04:35

echizeyayota

総合スコア104