Q&A
ご親切に、かつ非常にわかりやすい回答を頂き、有難うございました。
一瞬で、私の認識の間違いが、理解できました。
２日ほどモヤモヤしていた私の頭の中が、おかげさまでスッキリしました。
本当にありがとうございます。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
HTML Javascriptによるデジタル時計のプログラムです。
動作はするのですが、どうしても理解できないところがあります。
21-23行目
hourBox.value = hour;
minBox.value = min;
secBox.value = sec;
につきまして、なぜ、変数名.value でform内のinputのテキストフィールドのvalueを指定したことになるのでしょうか？
document.clockForm.hour.value = hour;
document.clockForm.minute.value = min;
document.clockForm.sec.value = sec;
としたら、動作して、form内のinputのテキストフィールドのvalueを指定したということが理解できるのですが。
なにぶんビギナーで独学しておりますので、平易な表現でお教えいただけたら幸いです。
宜しくお願い申し上げます。
該当のソースコード
JavaScript
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 var hourBox, minBox, secBox; 8 var timer; 9 window.onload = init; 10 function init() { 11 hourBox = document.clockForm.hour; 12 minBox = document.clockForm.minute; 13 secBox = document.clockForm.sec; 14 dClock(); 15 } 16 function dClock() { 17 var now = new Date(); 18 var hour = now.getHours(); 19 var min = now.getMinutes(); 20 var sec = now.getSeconds(); 21 hourBox.value = hour; 22 minBox.value = min; 23 secBox.value = sec; 24 timer = setTimeout("dClock()", 1000); 25 } 26 </script> 27</head> 28<body> 29 <form name="clockForm"> 30 <p> 31 <input type="text" name="hour">時 32 <input type="text" name="minute">分 33 <input type="text" name="sec">秒 34 </p> 35 </form> 36</body> 37</html>
試したこと
補足情報（FW/ツールのバージョンなど）
動作環境
windows10
回答2件
0
ベストアンサー
書き方が相当古いですが・・・
まず
var hourBox, minBox, secBox;
ここで、グローバル変数3つを宣言しているので、この3つは
関数のどこからでも書き換え・参照ができます。
window.onload = init;
HTMLが読まれた時点でinit関数が実行されます
function init() {
hourBox = document.clockForm.hour; minBox = document.clockForm.minute; secBox = document.clockForm.sec; dClock(); }
init関数内でグローバル変数にオブジェクトが投入されます。
javascriptの変数への投入は参照渡しなので
たとえば「hourBox = document.clockForm.hour」は
hourBoxという変数と、documentにあるname=clockFormの中の
name=hourというHTML要素は、オルタナティブな関係になります。
ちゃんと書くなら
javascript
1 hourBox = document.forms["clockForm"].elements["hour"]; 2 minBox = document.forms["clockForm"].elements["minute"]; 3 secBox = document.forms["clockForm"].elements["sec"];
的な書き方のほうがわかりやすいかもしれません
（いずれにしろ古いですけど）
timer = setTimeout("dClock()", 1000);
dClock関数の中で自分自身をコールバック文字列として
"dClock()"のように呼び出すと処理されます。
これも相当古いですね、せめて
javascript
1timer = setTimeout(dClock, 1000);
もしくは
javascript
1timer = setTimeout(function(){dClock()}, 1000);
のようにしたいところです。
sample
ざっくり今風にかくとこんな感じでしょうか？
javascript
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script> 7var timer; 8window.addEventListener('DOMContentLoaded', ()=>{ 9 timer = setInterval((function dClock(){ 10 var now = new Date(); 11 var hour = now.getHours(); 12 var min = now.getMinutes(); 13 var sec = now.getSeconds(); 14 document.querySelector('#clockForm [name=hour]').value = hour; 15 document.querySelector('#clockForm [name=minute]').value = min; 16 document.querySelector('#clockForm [name=sec]').value = sec; 17 return dClock; 18 })(),1000); 19}); 20</script> 21</head> 22<body> 23 <form id="clockForm"> 24 <p> 25 <input type="text" name="hour">時 26 <input type="text" name="minute">分 27 <input type="text" name="sec">秒 28 </p> 29 </form> 30</body> 31</html>
投稿2019/08/30 10:47
総合スコア114839
0
その前に
js
1hourBox = document.clockForm.hour;
というコードがありますから、hourBoxにはdocument.clockForm.hourが入っています。
js
1hourBox.value = hour;
↑は、つまり
js
1(document.clockForm.hour).value = hour;
ということです。（わかりやすくするためにカッコをつけています）
投稿2019/08/30 09:40
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/31 00:00