inputタグの文字入力数に応じて送信ボタンの背景色を変化させたい。

Question

前提・実現したいこと

inputタグの文字入力数に応じて送信ボタンの背景色を変更したい。

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

jQueryで入力数を受け取り、文字数が0のときは送信ボタンの背景色をlightgreen,1以上の時はgreenにしようとしています。
入力した際の背景色の変化は付けれたのですが、文字を削除した際の変化が付けれません。

該当のソースコード

<div class="email">
     <input type="email" id="email-input">
     <a href="" class="addEmail">メールアドレスを追加</a>
</div>

.email {
                    position: relative;
                    input {
                        display: block;
                        width: 450px;
                        height: 60px;
                        border-radius: 5px;
                        border: 1px solid white;
                        font-size: 14px;
                    }
                    .addEmail {
                        position: absolute;
                        top: 16%;
                        right: 17%;
                        text-decoration: none;
                        font-size: 18px;
                        font-weight: 800;
                        padding: 9px 15px;
                        color: white;
                        background: lightgreen;
                        border-radius: 5px;
                        transition: all 300ms;
                    }
                }

$('#email-input').on("keydown", function(){
  var input = $('#email-input').get(0);
  var count = input.value.length
  if(count => 1) {
    $('.addEmail').css('background','green');
  }else if (count == 0) {
    $('.addEmail').css('background','lightgreen');
  }
});

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

jQuery 3.5.1

Answer 1

こちらでいかがでしょうか?

$('#email-input').on("keydown", function(){
  var input = $('#email-input').get(0);
  var count = input.value.length
  if(count > 0) {
    $('.addEmail').css('background','green');
  }else if (count == 0) {
    $('.addEmail').css('background','lightgreen');
  }
});

if(count > 0) {
としてみると、こちらの環境では動作しました。

(なぜなのか、説明はできないのですが..)

Comments

[kei344]

そこですね。「=>」でなく「>=」ですね。

[new1ro]

確かに！「>=」ですね。

tkmvictimさん
if(count >= 1) {
でもOKっぽいです。

[tkmvictim]

不等号の指摘ありがとうございます。
countをconsole.log(count);として出力させ確認してみたのですが、文字が入力された際は認識しているのですが文字をBackSpaceキーを押して消去した際は認識されていませんでした。
やはりinputイベントを使う必要があるみたいです。

[tkmvictim]

on()のイベントをkeydownからkeyupに変更したら動作しました。
皆さん回答ありがとうございました。

Answer 2

input イベントを試してみてはいかがでしょう。

【HTMLElement: input イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event