javascriptの表示

<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "main.css">
  </head>
  
  <body>
    <div class = "square">
      <div class = "circles">
        <div class = "circle-1"></div>
        <div class = "circle-2"></div>
        <div class = "circle-3"></div>
      </div>
    </div>

    <button type = "button" class = "my-button">ボタン</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
コード

    $(".my-button").on("click", function() {
        if($(".circle-1").css("background-color")!== "rgb(128, 128, 128)") {
            $(".circle-1").css("background-color", "");
            $(".circle-2").css("background-color", "yellow");
        } else if($(".circle-2").css("background-color")!== "rgb(128, 128, 128)") {
            $(".circle-2").css("background-color", "");
            $(".circle-3").css("background-color", "red");
        } else {
            $(".circle-3").css("background-color", "");
            $(".circle-1").css("background-color", "skyblue");
        }
    });
})
コード

    width: 300px;
    height: 100px;
    background: white;
}

.circle-1, .circle-2, .circle-3 {
    width: 80px;
    height: 80px;
    background: grey;
    float: left;
    border-radius: 50px;
    margin-top: 10px;
    margin-left: 14px;
}


コード

というコードで水色黄赤の信号を作ったのですが、最初にボタンを押すと水色が表示されます。その理由がこのコードからどうしても理解することができません。わかるかたお助けください！

退会済みユーザー

2018/12/25 17:32

html部分のソースコード記載もお願いします。

kei344

2018/12/25 17:43

（質問文は編集できます）コードがどちらも切れているので質問本文を修正してください。

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

回答2件

最初にボタンを押すと水色が表示されます。その理由がこのコードからどうしても理解することができません。

console.log で $(".circle-1").css("background-color") の値を確認してみてください。
最初は rgb(128, 128, 128) なので、"rgb(128, 128, 128)" !== "rgb(128, 128, 128)" はfalse になり else if に進み、そこもfalse なのでelse に進み、水色になります。

動くサンプル：https://jsfiddle.net/nufcj47q/

【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/27205

投稿2018/12/25 18:01

kei344

総合スコア69400