javascript jquery をvanila jsに書き換えたい

Question

document.addEventListener('change', function (e) {
    var _document$querySelect;
    var v = (_document$querySelect = document.querySelector('[name="boundSelect"]:checked')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.value;
    box_out.style.display = v == "out" ? "block" : "none";
    box_in.style.display = v == "in" ? "block" : "none";
    if (v === "out") {
      $('#inputDate').val($('#dateSelector_out').val());
    } else if (v === "in") {
      $('#inputDate').val($('#dateSelector_in').val());
    }
  });

上記のように、バニラJSにjqueryが混ざっているコードを書いてしまい、以下のようにバニラJSに統一しようとしているのですが、

document.addEventListener('change', function (e) {
    var inputDate = document.getElementById('inputDate');
    var dateSelector_out = document.getElementById('dateSelector_out');
    var dateSelector_in = document.getElementById('dateSelector_in');
    var _document$querySelect;
    var v = (_document$querySelect = document.querySelector('[name="boundSelect"]:checked')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.value;
   
    box_out.style.display = v == "out" ? "block" : "none";
    box_in.style.display = v == "in" ? "block" : "none";
    if (v === "out") {
      inputDate.val(dateSelector_out.val());
    } else if (v === "in") {
      inputDate.val(dateSelector_in.val());
    }
  });

現状は、コンソールから「scripts.js:627 Uncaught TypeError: dateSelector_in.val is not a function」と出てきます。

最終的には三項演算子に統一したいのですが、if elseの書き方に慣れているため、jqueryだった箇所をif else のままにしています。これも統一しないとな。。。。

jsほぼ初心者のためどう書き換えていいのかわかりません。
アドバイスお願いします。

Comments

[退会済みユーザー]

このコメントは回答欄に移動しました。

[Cocode]

エラーが出ないか確認しながらコードを書きたいので、htmlもご提示いただくことは可能でしょうか？

[yambejp]

https://teratail.com/questions/4rbqpfpg6x8xdq
ではだめなのでしょうか？

[退会済みユーザー]

質問者さん、回答したのでフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。

[Fukusuke0604]

返信遅くなりすみませんでした。

やはり、一旦は動くコードで実装進めていいよ。ということになりました。
皆さん、ご意見いただきありがとうございました。
この週末にゆっくり腰を据えて書き直しをしてみます。

Answer 1

現状は、コンソールから「scripts.js:627 Uncaught TypeError: dateSelector_in.val is not a function」と出てきます。

val() は jQuery だからでしょう。

.val()
https://api.jquery.com/val/

input 要素が相手なら value を使ってみてはいかが？

jsほぼ初心者のためどう書き換えていいのかわかりません。

そういう状況であれば、元のコードが問題なく動いているのなら、無理に無駄な時間を使って書き換えなくてもいいのでは？