JavaSqliptのフォームからリアルタイムで数値を受け取って比較したい

前提・実現したいこと

HTML内にJavaSqliptを埋め込んで、テキストボックスの値を比較して表示内容を変えるプログラムを作りたいです。
テキストボックスの内容はリアルタイムで判定したいです。

プログラミングの初心者なのでいろいろな機能を取り入れながらいろいろ実験してる最中ですがあまりにもわからないので投稿いたしました。

発生している問題

表示が変わらない

該当のソースコード

<HTML>
<meta http-equiv="Content-Type" content="text/html; charset= Shift_JIS">
<HEAD>
<TITLE>てすと２</TITLE>

<Script Language="JavaScript">
	//↓documentをdと宣言すると、その後ラクです。
	//↓JavaScriptのスピードアップの効果もあるらしいです。
	var d = document;

	//↓後の関数で使う変数を宣言します。
	var oldvalue = "";
	var InPut;
	var OutPut;
	
	var henkan;

	//↓何ミリ秒ごとに値のチェックをするか(1000=1秒)
	var TimeInterval = 1000;

	function ValCheck() {
		//↓それぞれの変数に代入します。
		InPut = d.getElementById("Text1");
		OutPut = d.getElementById("Div1");
		
		henkan= parseInt(InPut);

		//OutPutを指定ミリ秒で書き換えても良いのですが、念のため「変更があった時」だけ書き換えるようにします。
		if (oldvalue != InPut.value) {
			OutPut.innerHTML = InPut.value;
			oldvalue = InPut.value;
		}
		
		
		//たぶんこのif文がうまくいってないような気がする
		if(henkan<100){
        document.getElementById("JS").innerHTML = "100以上";
		}else{
        document.getElementById("JS").innerHTML = "100以下";
		}
		
		
		//↓ここがキモです。1000ミリ秒後に、関数を呼び出します。
		setTimeout(ValCheck, TimeInterval);
	}


</Script>

</HEAD>

<BODY onload="ValCheck();">

	Text1↓
	<BR>
	<Input type="text" id="Text1">
	<BR>
	<BR> 
	<BR>
	<Div id="Div1"
		style="background-color: #FFEEF8; border: 1px solid #FF0000; width: 200px; height: 100px; padding: 10px;"></Div>

	<h5>
		<a href="javascript:;" onclick="Display_JS('no1')">切り替え</a>
		<a href="javascript:;" onclick="Display_JS('no2')">元に戻す</a>
	</h5>

	<br>

		<div id="JS">100以下</div>
	
	

	
	
</BODY>

</HTML>

mepon

2019/06/28 02:06

色々とツッコミどころが多いですが、とりあえず JavaSqliptではなくJavaScriptです。要件的に難しく考えずに、$(セレクタ).val();で値を見てそれを元にやりたい事記述するのが一番簡単だと思います。

yoyakoma

2019/06/28 02:11

素人質問で申し訳ありませんが$(セレクタ).val();で値を見るというのがいまいちわからないです。ソースコード内に記述するようなことなのでしょうか

maisumakun

2019/06/28 02:12

コードを見る限り、jQuery以前の感じですね＞meponさん

mepon

2019/06/28 02:32

>maisumakunさんご指摘ありがとうございます！そうですね。jQueryの1.0リリースが2000年以降だった記憶があるのでこの記述だともっと古そうですね・・・

yoyakoma

2019/06/28 02:33

参考が古すぎたという件だそうで、ご回答ありがとうございます。ちょっと別で参考になりそうなものイチから探してみます

mepon

2019/06/28 03:10

>yoyakomaさん調べ方のアプローチだけ。新しめのHTMLの書き方と、JavaScriptにはjQueryという便利なライブラリがあります。使い方もheadタグなりに1行追加して読み込ませるだけですしとても簡単です！恐らくjQueryを使えばやりたい事は5行程度でできてしまうはずです。頑張ってみてください

yoyakoma

2019/06/28 03:12

>meponさんご親切にありがとうございます！ jQueryでいまいちど探してみます！