[js]ボタン押下後、input[text]に文字が入っていなければ背景色を変化させるには

Question

$('#btn_submit').click(function() {
            $('#FormId').submit();
            var inputVal = document.getElementById("inputId").value;
            if (inputVal == "") {
                inputVal.style.backgroundColor = "yellow";
            } else {
                inputVal.style.backgroundColor = "";
            }
        });

としてみたんですが、動きません。
submitを入れないとボタン押下ご反応もしてくれなくて。
どう変えればよいですか？
またなぜ動かないんでしょうか？

修正コードを元に追記→

function checkFilled() {
            var inputVal = document.getElementById("inputId");
            if (inputVal.value == "") {
                inputVal.style.backgroundColor = "yellow";
            } else {
                inputVal.style.backgroundColor = "";
            }
        };

<input onchange="checkFilled();" type="text" id="InputId" style="background-color: yellow;">

※style="background-color: yellow;"となっているのは開発ツールから引用したため。

<p><a href="javascript:void(0);" id="btn_submit">確認</a></p>

としてみたところ、イエローに色は変わりましたがボタン押下関係なく色が変わる点と、値を入れようがいれまいが色がイエローになっています。
頭もごちゃごちゃなってきてて...再修正お願いできますか？何が問題でしょうか。
このbtn_submitをどうにかせねばならないのは分かるんですが、onclickとかを使うんでしょうか？

Comments

[Lhankor_Mhy]

「回答もしくは繋がりそうな質問にのみ答えます。他は時間の無駄なので一切返しません。」
https://teratail.com/users/testakaunt#question

[m.ts10806]

「回答されても自分が理解できないものには答えません」
も追加しておいてくださいね。
これまでのやり取り見てると、とても回答を理解して返答してるようには見えないので。
理解できてたら次以降の質問が出てるはずがないので。
いっそ「作業依頼です」とか書いておいてくれません？

[miyabi_pudding]

> 繋がりそうな質問にのみ

質問者さんでその判断が正しくできるなら、大多数の質問トピックは発生しませんよ。

[m.ts10806]

既に回答してる内容で対応可能です。
>クリックイベント冒頭で全部クリアしてしまえば良いでしょう。

Answer 1

submitは送信する機能なので送信したあとに色をかえたところで反映されないのは当然です。
送信されてしまってますから。

「バリデーション」を意図した実装なら、
「バリデーションにかからなかったとき」にsubmitすれば良いです。
送信してしまえば「色」は関係ないので空に戻す必要もなし。
複数項目あるならクリックイベント冒頭で全部クリアしてしまえば良いでしょう。

---

あとはHTML提示されてないとかjQueryの記法に統一されてないのが変とか、
ツッコミどころは沢山ありますが、ロジックだけならこれで出来るでしょう。単に処理順がおかしいだけです。

Answer 2

            var inputVal = document.getElementById("InputId"); //←
            if (inputVal.value == "") { //←
                inputVal.style.backgroundColor = "yellow";
            } else {
                inputVal.style.backgroundColor = "";
            }

Comments

[退会済みユーザー]

ありがとうございます。
ボタンとinputの記述を追記しますので、少々お待ちください。

[退会済みユーザー]

buttonにonchangeつけて、紐づけてもうまくいかないんですがこのコードでうまくいかないということはまた別の問題があるんでしょうか？

[Lhankor_Mhy]

buttonにonchangeつけても、意味はないと思います