jQuery if文　値　取得

前提・解決したいこと

テキストボックス内に特定の数値を入力すると
下のボックス(box)のbackground-colorを変更する。
if文を使用して作成する

発生している問題

数値によって色の変更はできているが、
テキストボックスのボタン色が変わる。

HTML
1コード
2<head>
3  <meta charset="UTF-8">
4  <title>if文</title>
5  <link rel="stylesheet" type="text/css" href="base.css">
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7  <script>
8    $(function () {
9      $('#button').on('click', function () {
10        var text = $('#value').val();
11        if (text == 1) {
12          $('#box').css('background-color', '');
13          $(this).css('background-color', 'red');
14        } else if (text == 2) {
15          $('#box').css('background-color', '');
16          $(this).css('background-color', 'blue');
17        } else {
18          $('#box').css('background-color', '');
19          $(this).css('background-color', 'green');
20        }
21      });
22    });
23  </script>
24</head>
25
26<body>
27  <input type="text" id="value">
28  <input type="button" id="button" value="ボタン">
29  <div id="box">
30  </div><!-- button -->
31</body>

試したこと

html
1コード
2<head>
3  <meta charset="UTF-8">
4  <title>if文</title>
5  <link rel="stylesheet" type="text/css" href="base.css">
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7  <script>
8    //変更箇所
9    $(function () {
10      $("#button").on("click", function () {
11        var text = $("#value").val();
12        $("#box").css("background-color", text == "1" ? "red" : (text == "2" ? "yellow" : "blue"));
13      });
14    });
15  </script>
16</head>
17
18<body>
19  <input type="text" id="value">
20  <input type="button" id="button" value="ボタン">
21  <div id="box">
22  </div><!-- button -->
23</body>

他のQ&Aを検索してみて同じようなものがあったので使用してみた。
この場合だとboxの色が変更される。
しかしどのような動作で動いているのか不明なため参考にできない。
(そのQ&Aにも解説なし)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

175

2021/10/24 08:31

？？？ $('#button').on('click'のハンドラに対して$(this).css('background-color', 'red');のように変更しているのだからボタンの色が変わるのは普通では？ $('#box').css('background-color', ''); これも意図がわかりません。#boxの背景色を変えたいのではないんですか？

n_k23

2021/10/24 08:36

ご指摘ありがとうございます。確かにその通りですね。もう少しthisの使い方を検討してみます。

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

回答2件

しかしどのような動作で動いているのか不明なため参考にできない。

text変数にid="value"の要素の値を読み込み、その値をもとにid="box"の要素のbackground-colorを変更しています（textが1ならred, 2ならyellow, それ以外ならblue)

javascriptの基本的な構文が理解できていないようなので、基礎から勉強されることをおすすめします。

投稿2021/10/24 08:40

175

総合スコア147

自己解決

html
1コード
2$('#button').on('click', function () {
3        var text = $('#value').val();
4        if (text == 1) {
5          $('#box').css('background-color', '');
6          $('#box').css('background-color', 'red');
7        } else if (text == 2) {
8          $('#box').css('background-color', '');
9          $('#box').css('background-color', 'blue');
10        } else {
11          $('#box').css('background-color', '');
12          $('#box').css('background-color', 'green');
13        }
14      });