JS if文入れる数字によってボックスの色を変える

前提・実現したいこと

JavaScript
ボタンクリック時に入力されている値を取得した後に、if文を使い以下のように背景色を変更したい。

1が入力されていたら：赤
2が入力されていたら：緑
それ以外が入力されていたら：青

発生している問題・エラーメッセージ

ます１を入力したらボックスを赤にする
というのに挑戦してますが、いろいろ試してもボックスの色が変わりません

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>if文</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>
  $(function(){
    // ここに処理を記述
    $("#button").on("click", function () {
    var v = $('input').val();
    if(v=1){
      $('#box').css('background-color','red');
    }
});
  });
  </script>
</head>
<body>
  <input type="text" id="value">
  <input type="button" id="button" value="ボタン">
  <div id="box">
  </div><!-- button -->
</body>
</html>

###追記
御三方回答ありがとうございました！！とっても勉強になりました。
今回は1番早くご回答くださった方をベストアンサーとさせていただきます。
この度はありがとうございました。

mather

2021/08/17 10:11

解決したのであればどなたかの回答をベストアンサーを選んで解決済みにしましょう。

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

回答3件

ベストアンサー

js
1    if(v=1){

<input>の値は文字列です。
値の比較は = ではなく == などです。

js
1    if (v == '1') {

投稿2021/08/17 09:38

int32_t

総合スコア20832

osaya

2021/08/17 09:41

すっかり基本を忘れていました・・・ありがとうございます！！！

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

<div id="box">サンプル</div> のように適当な内容を入れてみてください。
中身のない div 要素はそもそも高さ0で表示されていないかもしれません。

ちなみに、 $('input').val() は文字列なので、 "1"==1 と判定することになります。
JavaScriptではこれも true になるので動作しますが、できれば if(v == "1") または文字列を数字に変換して比較するようにしましょう。

投稿2021/08/17 09:43

mather

総合スコア6753

osaya

2021/08/17 09:57

ご丁寧な回答ありがとうございます！仰るとおり、 if(v == "1")　に直したら無事に動きました。ありがとうございました。

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

javascript
1<script>
2$(function(){
3  $("#button").on("click", function () {
4    var v = $('input').val();
5    var colors={1:"red",2:"green"};
6    var color=colors[v]||"blue";
7    $('#box').css('background-color',color);
8  });
9});
10</script>
11<input type="text" id="value">
12<input type="button" id="button" value="ボタン">
13<div id="box">&nbsp;</div>