入力された値が自動で計算されるプログラムを作りたいです。

Question

・やりたいこと
form1とform2に入力された数値を掛けた結果をform3に出力したいです。
javaScript記述がだいぶお粗末かと思いますが、よろしくお願いします。

<div class="container">
    <div class="row">
      <form class="col-12">
        <div class="form-group col-6 mt-3">
          <input type="text" id="form1" class="form-control" placeholder="宿泊予定日数/半角数字">
        </div>
        <div class="form-group col-6 mt-3">
          <input type="text" id="form2" class="form-control" onkeydown="culculator()" placeholder="１泊料金/半角数字">
        </div>
        
          <div id="form3" style="font-size: 2rem; font-weight: bold;"></div>
      </form>
    </div>
  </div>

const unitDay = document.getElementById('form1').value;
const unitPrice = document.getElementById('form2').value;

function culculator() {
    if (unitDay && unitPrice === Number.isInteger(1^9)) {
        const amount = unitDay * unitPrice;
        document.getElementById('form3').innerHTML = amount;
    } else {
        alert("半角数字で入力してください。")
    }
}

Answer 1

動作確認出来ました^^

    <div class="container">
      <div class="row">
        <form class="col-12">
          <div class="form-group col-6 mt-3">
            <input type="text" id="form1" class="form-control" placeholder="宿泊予定日数/半角数字">
          </div>
          <div class="form-group col-6 mt-3">
            <input type="text" id="form2" class="form-control" placeholder="１泊料金/半角数字">
          </div>
            <div id="form3" style="font-size: 2rem; font-weight: bold;"></div>
        </form>
      </div>
    </div>

      window.addEventListener("load",()=>{
        document.querySelectorAll('.form-group').forEach(frm=>{
          frm.addEventListener('keyup',()=>{
            form3.textContent = form1.value * form2.value;
          });
        });
      });

如何でしょうか？

Comments

[cheetoi]

tomtomtomtomさん、シンプルで理解しやすいコードを回答いただきありがとうございます。
エディタから正常に動作いたしました。今回は早く回答してくれたyambejpさんをベストアンサーに選びますが、機会がありましたらまたお願いいたします！

[tomtomtomtom]

ご返答ありがとうございます^^
解決できたようで、こちらも嬉しく思います。
よろしければご評価いただけると幸いです。
今後の励みになります^^

Answer 2

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.form-control').forEach(x=>{
    x.addEventListener('input',()=>{
      var v1=document.querySelector('#form1').value;
      var v2=document.querySelector('#form2').value;
      var txt;
      if(v1==="" || v2===""){
        txt="";
      }else if(isNaN(v1) || isNaN(v2)){
        txt="数字だけ";
      }else{
        txt=v1*v2;
      }
      document.querySelector('#form3').textContent=txt;
    });
  });
});

Comments

[cheetoi]

yambejpさん、つたない文章からやりたい動作をくみ取っていただきありがとうございます。
正常に動作しましたので使わせてください。