0

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


【質問の主旨】

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

【質問の補足】

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) と CSS (css/style.css)

  • 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/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;
}

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

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


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

2
  • 1
    まずは、エラーにならないスクリプトを、IF文に条件が設定されていないので、styleBackground 関数は動きません。
    – yyz
    Commented 2020年2月5日 9:44
  • yyz さん。コメントありがとうございます。とりあえず質問の本文で記述したコードについて、エラーが出ないように修正しました。ですがエラーが出ないだけで、ボックスをクリックしたときに一瞬だけオレンジに変更するという仕様は満たされていません。もし修正の方法をご存知でしたらご教示を願います。 Commented 2020年2月9日 5:00

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。