フォームに入力した値をvalueに入れて読み込みたい

前提・実現したいこと

先日ほぼ同じコードで別の質問をさせていただいた者です。

フォームに入力された値を取得しなおして、ランダムに生成された数値と比較して正解・不正解を返すプログラムを作っているのですが、これだと「$ is not defined」とエラーが出ます

それから、
if(onload.num == judge.textbox) {
answerJ.innerHTML = "正解！";
} else if (onload.num > judge.textbox) {
answerJ.innerHTML = "もっと小さな数です";
} else {
answerJ.innerHTML = "もっと大きな数です";
}

のところを通過する際にも正しいジャッジを返してくれません

調べまくっていろいろ試してみましたが(document.forms...など)、もうどうすればいいかわかりません…どなたか説明をお願いいたします

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width">
7  <title>数当てゲーム</title>
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <script src="numcrunchingg.js"></script>
10</head>
11<body>
12
13<center>
14<h2 class="h2-a">数当てゲーム</h2>
15    <p>１から100までの数字を当てるシンプルなゲームです。<br>
16      ※半角数字で入力してください。</p>
17
18      <section class="numcrunchingg">
19        <input type="number" name="randomNumberN" id="randomNumberI" size="4" value="0">
20        <input type="button" id="checkbutton" value="当ててみる" onclick="judge();">
21        <section  id="output"></section>
22      </section>
23
24
25</center>
26
27</body>
28
29</html>
30

JavaScript
1// 数当てゲーム
2window.onload = function onload(){
3let min = 1;
4let max = 100;
5let num;
6
7num = Math.floor(Math.random() * (max + 1 - min)) +min;
8
9console.log(num);
10
11var textbox = document.getElementById('randomNumberI').value;
12// console.log(randomNumberI.value);
13
14}
15
16function judge() {
17    $('randomNumberI').val(document.getElementById('randomNumberI')); // ←ここをどうすればいいか？
18    var answer = textbox;
19
20    let flag = 0;
21    if(isNaN(randomNumberI.value)){
22      flag = 1;
23    }
24
25    if(flag){
26      window.alert("数字を半角で入力してください。");
27    } else {
28
29      var answerJ = document.getElementById("output")
30
31      if(onload.num == judge.textbox) {
32        answerJ.innerHTML = "正解！";
33      } else if (onload.num > judge.textbox) {
34        answerJ.innerHTML = "もっと小さな数です";
35      } else {
36        answerJ.innerHTML = "もっと大きな数です";
37      }
38    }
39  }
40

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

回答2件

ベストアンサー

これだと「$ is not defined」とエラーが出ます

jQueryの$ですが、初心者にjQueryはお勧めしたくないので、その行はぜんぶ消してしまいましょう。

js
1      if(onload.num == judge.textbox) {
2        answerJ.innerHTML = "正解！";
3      } else if (onload.num > judge.textbox) {

関数内のローカル変数をこのような形で参照することはできません。

まず、num はグローバルにしてしまいましょう。

js
1let num = Math.floor(...);
2window.onload = function() {

その上で、ジャッジ部分は以下のようにします。

js
1      let inputNumber = document.getElementById('randomNumberI').valueAsNumber;
2      if (num == inputNumber) {
3        answerJ.innerHTML = "正解！";
4      } else if (num > inputNumber) {