javascriptの関数を使ったタイマーの作成

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
初心者です。javascriptを使った１秒ごとに時間が刻まれていくタイマーを作りたいのですが、関数を打ち込んでも機能しません。どうすればよいでしょうか

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください
```<html>
<head>
<title>ストップウォッチ</title>
<style type="text/css">
	* {
		font-size:32pt
	}
</style>

<script type="text/javascript">
function startSW() {
tm=setInterval('startSW',1000);
sec++;
document.f1.cnt.value=sec;
	// 「開始」ボタンがクリックされたときに実行される関数

	// 処理内容
	//   ・経過時間を表す変数の値を0にする
	//   ・部品名「cnt」のテキストフィールドに'0'を表示する
	//   ・インターバルタイマーの設定で、「dispTime()」関数を１秒ごとに
	//    実行するようにする
}

function stopSW() {clearInterval(tm);
	// 「停止」ボタンがクリックされたときに実行される関数

	// 処理内容
	//   ・タイマーを解除する
}

function dispTime() {

	// 一定時間ごとに実行される関数

	// 処理内容
	//   ・経過時間を表す変数の値を +1 する
	//   ・部品名「cnt」のテキストフィールドに経過時間を表示する
}

</script>
</head>
<body>
ストップウォッチ
<form name="f1">
	<input type="text" name="cnt" value="0" style="text-align:right">
	<p>
	<input type="button" value="開始" onClick="startSW();">
	<input type="button" value="停止" onClick="stopSW();">
</form>
</body>
</html>


###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/06/22 08:39

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

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

回答3件

secが定義されていないというエラーが出ています。

chromeなどを使っているのであればF12で開発者ツールを使うことができますので、
どんなエラーが出ているかを見ることができます。

secを定義してあげても動かないので、ぜひ上記で色々値を表示させながら試してみてください。

例えばstartをこうするだけでもstartが動くようになります。

javascript
1var sec = 0;
2function startSW() {
3    var disp = function(){
4	sec++;
5	document.f1.cnt.value=sec;
6    }
7    setInterval(disp,1000);
8}

投稿2017/06/22 05:52

編集2017/06/22 05:55

s.t.

総合スコア2021

グローバル変数が必要かもしれません。

javascript
1<script>
2var tm=0;
3var sec=0;
4function startSW() {
5  tm=setInterval(function(){
6    sec++;
7    document.forms["f1"].elements["cnt"].value=sec;
8  },1000);
9}
10function stopSW() {
11  clearInterval(tm);
12}
13
14</script>
15ストップウォッチ
16<form name="f1">
17<input type="text" name="cnt" value="0" style="text-align:right">
18<p>
19<input type="button" value="開始" onClick="startSW();">
20<input type="button" value="停止" onClick="stopSW();">
21</form>
22

投稿2017/06/22 05:55

yambejp

総合スコア114769

setInterval は1回呼ぶと定期的に呼ばれるので startSW から startSW を呼び出すと無限にタイマーが作られてそのうちクラッシュしそうです。
setInterval の代わりに setTimeout を使って自分自身を呼び出すか、呼び出す関数を別にして setInterval を呼び出して下さい。

html
1<html>
2<head>
3<title>ストップウォッチ</title>
4<style type="text/css">
5* { font-size:32pt; }
6</style>
7<script type="text/javascript">
8var sec = 0, tm = null;
9function startSW() {
10  // 既にタイマーが開始していたら処理しない
11  if (tm != null) return;
12  tm = setInterval(dispTime, 1000);
13}
14function stopSW() {
15  // 既にタイマーが停止していたら処理しない
16  if (tm == null) return;
17  clearInterval(tm);
18  tm = null;
19}
20function dispTime() {
21  sec++;
22  document.getElementById('cnt').value = sec;
23}
24</script>
25</head>
26<body>
27ストップウォッチ
28<form name="f1">
29<input type="text" name="cnt" id="cnt" value="0" style="text-align:right"><br />
30<input type="button" value="開始" onClick="startSW();">
31<input type="button" value="停止" onClick="stopSW();">
32</form>
33</body>
34</html>