javascript rect 画像スクロールのプログラム

javascriptを勉強中です。

コンソールログを見たのですが、エラー箇所がわからない為質問させてください。

開始ボタンでスクロールを開始し、停止ボタンで停止するプログラムです。
停止位置を数字の途中でなく区切りの良い位置で止めるプログラムです。
数字は、０、１、２、３、４、５、６、７、８、９、０の１０文字です。
１文字の高さは60pxです。

テキストの通りに入力しているつもりなのですが、開始ボタンを押しても動作しません。
間違っている箇所はありますでしょうか？

javascript
1<!DOCTYPE html>
2<html>
3<head>
4
5<script>
6
7	var cy=0,y=50,TimeId;
8	function stop()
9	{
10		clearInterval(TimeId);
11		var obj=document.getElementById("myimg");
12		cy=parseInt(cy/60)*60;
13		y=parseInt((y-50)/60)*60+50;
14		obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
15		obj.style.top=y+"px";
16	}
17
18	function scroll()
19	{
20		var obj=document.getElementById("myimg");
21		obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
22		obj.style.top=y+"px";
23		cy+=10;
24		y-=10;
25
26		if (cy>=60*10){
27			cy=0;
28			y=50;
29		}
30	}
31
32</script>
33
34</head>
35<body>
36
37<input type="button" value="開始" onClick="TimeId=setInterval(scroll,100)" style="position:absolute;left:50px;top:20px" />
38<input type="button" value="停止" onClick="stop()" style="position:absolute;left:90px;top:20px" />
39<img id="myimg" src="number.gif" style="position:absolute;left:50px;top:50px;clip:rect(0px,60px,60px,0px)" />
40
41</body>
42</html>

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

回答2件

ベストアンサー

修正手順

実行すれば、エラーはわかりますが…。

オリジナル - JSFiddle - Code Playground

TypeError: Illegal invocation

各変数値は確認しておいて、損はないでしょう。
(jsfiddleではconsole.logが失敗するので、ローカルテスト)

HTML
1<!DOCTYPE html>
2<title>sample</title>
3<input type="button" value="開始" onClick="console.log(TimeId, window.scroll, scroll);" style="position:absolute;left:50px;top:20px" />
4<input type="button" value="停止" onClick="stop()" style="position:absolute;left:90px;top:20px" />
5<img id="myimg" src="number.gif" style="position:absolute;left:50px;top:50px;clip:rect(0px,60px,60px,0px)" />
6<script>
7'use strict';
8var cy=0,y=50,TimeId;
9
10function stop()
11{
12  clearInterval(TimeId);
13  var obj=document.getElementById("myimg");
14  cy=parseInt(cy/60)*60;
15  y=parseInt((y-50)/60)*60+50;
16  obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
17  obj.style.top=y+"px";
18}
19
20function scroll()
21{
22  var obj=document.getElementById("myimg");
23  obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
24  obj.style.top=y+"px";
25  cy+=10;
26  y-=10;
27
28  if (cy>=60*10){
29    cy=0;
30    y=50;
31  }
32}
33</script>

変数 scroll の値が期待通りでない為、window.scroll に修正。

HTML
1<input type="button" value="開始" onClick="TimeId=setInterval(window.scroll,100)" style="position:absolute;left:50px;top:20px" />

window.scrollに修正 - JSFiddle - Code Playground

addEventListener

HTMLのonclick属性値は特別なスコープで実行される為、addEventListener のコードに慣れておくことを推奨します。

HTML
1<!DOCTYPE html>
2<title>sample</title>
3<input type="button" value="開始" style="position:absolute;left:50px;top:20px" />
4<input type="button" value="停止" style="position:absolute;left:90px;top:20px" />
5<img id="myimg" src="number.gif" style="position:absolute;left:50px;top:50px;clip:rect(0px,60px,60px,0px)" />
6<script>
7'use strict';
8var cy=0,y=50,TimeId;
9
10function stop(event)
11{
12  clearInterval(TimeId);
13  var obj=document.getElementById("myimg");
14  cy=parseInt(cy/60)*60;
15  y=parseInt((y-50)/60)*60+50;
16  obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
17  obj.style.top=y+"px";
18}
19
20function scroll()
21{
22  var obj=document.getElementById("myimg");
23  obj.style.clip="rect("+cy+"px,60px,"+(cy+60)+"px,0px)";
24  obj.style.top=y+"px";
25  cy+=10;
26  y-=10;
27
28  if (cy>=60*10){
29    cy=0;
30    y=50;
31  }
32}
33
34document.querySelector('input[type=button][value="開始"]').addEventListener('click', function (event){
35  TimeId = setInterval(scroll, 100);
36}, false);
37
38document.querySelector('input[type=button][value="停止"]').addEventListener('click', stop, false);
39</script>
40