javascript ストップウォッチ

Question

web上のサイト様を参考に下記のようなストップウォッチを利用したいと考えております。

HTML部分のformタグ内で記述している、実行ボタンと時間を表示するテキストエリアをそれぞれ自由な位置に配置できるように同じformタグ内ではなく、分割したいと思っているのですがどのようにすれば良いのでしょうか。

勉強不足な次第でございますが、ご教授お願い致します。

<script>
		myButton = 0;

	function myWatch(flug) {
			if (myButton == 0) {
				Start = new Date();
				myButton = 1;
				document.myForm.myFormButton.value = "運動を始める";
				myInterval = setInterval("myWatch(1)", 1);
			}
			else {
				if (flug == 0) {
					myButton = 0;
					document.myForm.myFormButton.value = "運動を終える";
					clearInterval(myInterval);
				}
				Stop = new Date();
				T = Stop.getTime() - Start.getTime();
				H = ("0" + Math.floor(T / (60 * 60 * 1000))).slice(-2);
				T = +T - (H * 60 * 60 * 1000);
				M = ("0" + Math.floor(T / (60 * 1000))).slice(-2);
				T = T - (M * 60 * 1000);
				S = ("0" + Math.floor(T / 1000)).slice(-2);
				document.myForm.myClick.value = H + ":" + M + ":" + S;
			}
		}
	</script>

	```HTML
<form action="#" id="myForm" name="myForm">
		<input name="myFormButton" onclick="myWatch(0)" type="button" value="スタート">
		<input name="myClick" style="border:none" type="text">
	</form>

Answer 1

このJavaScriptでは

document.myForm.myFormButton.value = "..."

と

document.myForm.myClick.value = "..."

の部分で、HTML上のform要素「name="myForm"」と密接につながっています。

そこで、HTMLで以下のようにinput要素へ独自のidを付与して

<!-- スタート・ストップボタン -->
<input type="button" id="myFormButton" onclick="myWatch(0)" value="スタート">

<!-- 時間表示 -->
<input type="text" id="myClick" style="border:none">

とそれぞれ、お好きなところへ配置して、
JavaScript側も次のように変更します。

        myButton = 0;

    function myWatch(flug) {
            if (myButton == 0) {
                Start = new Date();
                myButton = 1;
                document.getElementById("myFormButton").value = "運動を始める";
                myInterval = setInterval("myWatch(1)", 1);
            }
            else {
                if (flug == 0) {
                    myButton = 0;
                    document.getElementById("myFormButton").value = "運動を終える";
                    clearInterval(myInterval);
                }
                Stop = new Date();
                T = Stop.getTime() - Start.getTime();
                H = ("0" + Math.floor(T / (60 * 60 * 1000))).slice(-2);
                T = +T - (H * 60 * 60 * 1000);
                M = ("0" + Math.floor(T / (60 * 1000))).slice(-2);
                T = T - (M * 60 * 1000);
                S = ("0" + Math.floor(T / 1000)).slice(-2);
                document.getElementById("myClick").value = H + ":" + M + ":" + S;
            }
        }

Comments

[main4]

document.getElementById("myFormButton").value = "運動を終える";
document.getElementById("myFormButton").value = "運動を終える";
の2行で
Uncaught TypeError: document.getElementByID is not a function
のエラーが出てしまいました。

[main4]

ごめんなさい。大文字小文字でしたね。わざわざどうもありがとうございました。
なにかとidのほうが良さそうですね。

Answer 2

name じゃなくて、id にしてあげれば form タグの中にある必要なしです。
name でも〜getelementsbyname で取れるででょ、というツッコミは無しにしてください。

ぼたんもかっこよくしたいなら、<input type=image /> という画像ボタンもあります。

数字もかっこいいデジタルな数字の画像を探して来て、見栄えの良いストップウォッチを
作ってください。

Comments

[main4]

活動計を作ってみたいので、かっこいいデザインにも挑戦したいです。そこらへんも勉強してみます。