javascriptでテキストエリアにボタンを押した時の経過時間を記録していくには

javascriptで、カウントボタンを押したら押した時の経過時間をボタン押したごとにテキストエリアに記録し以下のように表示したいと考えています。（押した秒数によって変わります）また、押した回数もカウントしたいと考えています。
１０
１３
２４
・
・
プログラムを書いたのですが、テキストエリアに記録されずカウントもされません。
申し訳有りませんがご教示宜しくお願い致します。
言語：javascript
os：osX Yosemite

<html>
<head>
<title>カウントテスト</title>

<script type="text/javascript">
<!--

var start = new Date();

var sec = 0;
var now = 0;
var datet = 0;
var strMoto;
var $counta = 0;

function disp(){

	now = new Date();

	datet = parseInt((now.getTime() - start.getTime()) / 1000);

	sec = datet;

	if(sec < 10) { sec = "0" + sec; }

	document.form1.field.value = sec;

	setTimeout("disp()", 1000);
        
        strMoto = document.forms["frmTime"].elements["txtTime"].value;
        if(strMoto !=""){
            strMoto = strMoto + "\n";
        }
        document.forms["frmTime"].elements["txtTime"].value=strMoto + sec;
        document.forms["frmTime"].elements["txtTime"].focus();
        
        document.getElementById("outputA").innerHTML = ++$counta;
}

// -->
</script>

</head>
<body onLoad="disp()">
<form action="#" name="form1">
    <form name="frmTime">
        <textarea name="txtTime" rows=10 cols=50 wrap=hard></textarea>
<input type="text" name="field" size="2"> 秒
    <input type="button" value="カウント" onClick="disp()" >
    <span id="outputA" style="margin-left:10px;">0</span>
</form>
    
</body>
</html>

kei344

2016/06/04 11:57

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

kei344

2016/06/04 13:50

編集ありがとうございます。

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

回答2件

ベストアンサー

表示できない件については以下が原因です。
・formタグが閉じてない。
・formタグは入れ子では禁止されているはず。

HTML
1<html>
2<head>
3<title>カウントテスト</title>
4
5<script type="text/javascript">
6//<!--
7
8var start = new Date();
9
10var sec = 0;
11var now = 0;
12var datet = 0;
13var strMoto;
14var $counta = 0;
15
16var init = function(){
17    
18    setInterval("secCount()", 1000);
19}
20
21var secCount = function(){
22    now = new Date();
23
24    datet = parseInt((now.getTime() - start.getTime()) / 1000);
25    
26    console.log((now.getTime() - start.getTime()) / 1000)
27
28    sec = datet;
29
30    if(sec < 10) { sec = "0" + sec; }
31
32    document.frmTime.field.value = sec;
33}
34
35var disp = function(){
36    strMoto = document.forms["frmTime"].elements["txtTime"].value;
37        if(strMoto !=""){
38            strMoto = strMoto + "\n";
39        }
40        document.forms["frmTime"].elements["txtTime"].value=strMoto + sec;
41        document.forms["frmTime"].elements["txtTime"].focus();
42
43        document.getElementById("outputA").innerHTML = ++$counta;
44}
45
46// -->
47</script>
48
49</head>
50    <body onLoad="init()">
51        <form name="frmTime">
52            <textarea name="txtTime" rows=10 cols=50 wrap=hard></textarea>
53            <input type="text" name="field" size="2"> 秒
54            <input type="button" value="カウント" onClick="disp()" >
55            <span id="outputA" style="margin-left:10px;">0</span>
56        </form>
57    </body>
58</html>

投稿2016/06/04 15:04

kentei_syunrai

総合スコア946

HTML
1<form action="#" name="form1">
2    <form name="frmTime">
3```↑このHTMLが問題です。
4form 内に form はHTMLの仕様として許可されていません。また、どちらにせよ</form>がひとつしかありません。
5
6なので、下記のようにすれば動くと思います。また、インデントを適切につければこの手の間違いが起こりにくいので、意識してコードを書いたほうが良いです。（プログラム用のエディタを使うのも手です）
7
8```HTML
9<form name="frmTime">
10	<textarea name="txtTime" rows=10 cols=50 wrap=hard></textarea>
11	<input type="text" name="field" size="2"> 秒
12	<input type="button" value="カウント" onClick="disp()" >
13	<span id="outputA" style="margin-left:10px;">0</span>
14</form>

JavaScript
1var start = new Date();
2var sec = 0;
3var now = 0;
4var datet = 0;
5var strMoto;
6var $counta = 0;
7
8function disp() {
9
10	now = new Date();
11
12	datet = parseInt( ( now.getTime() - start.getTime() ) / 1000 );
13
14	sec = datet;
15
16	if ( sec < 10 ) { sec = "0" + sec; }
17	document.frmTime.field.value = sec; // ここをform1からfrmTimeに
18
19	setTimeout( "disp()", 1000 );
20
21	strMoto = document.frmTime.txtTime.value;
22	if ( strMoto != "" ) {
23		strMoto = strMoto + "\n";
24	}
25	document.frmTime.txtTime.value = strMoto + sec;
26	document.frmTime.txtTime.focus();
27	document.getElementById( "outputA" ).innerHTML = ++$counta;
28}