動画の指定時間へジャンプしたい

Question

お世話になっております。
javascriptで動画を見ながらメモを保存できるようなサイトを作成しています。その機能の一つにメモを保存した時間をクリックすると動画がその時間へジャンプするというものをつけたいです。
例えば、動画が10秒まで再生された時にメモを保存すると
「・0:10 メモ内容」
と保存され、この「0:10」をクリックすると自動で動画が10秒のところへ飛びます。
現在メモを保存するところまではできているのですが、メモを保存した時間へジャンプすることができていません。
正確にはジャンプすること自体はできているのですが、例えば動画の再生時間が2秒、5秒、9秒でそれぞれメモを保存すると2秒や5秒のところをクリックしても9秒、つまり1番新しくメモした時間へ飛ばされてしまいます。
保存した再生時間が上書きされないためにはどうしたら良いのでしょうか。わかりにくい文章で恐縮ですが、何卒ご教示いただけると幸いです。

以下は保存ボタンを押した時の処理です。

// 保存ボタンを押した時
					function save() {
						var MemoData = document.form1.Memo.value;//htmlのフォームからメモデータを取得
						memodata.push(MemoData);//配列に入れる
						
						now = Math.floor(video.currentTime);//現在の再生時間を取得
						second=now%60;//秒を取得
						byou.push(second);//配列に入れる
						minute=now/60;//分を取得
						hun=Math.floor(minute);
						minute2.push(hun);//配列に入れる
						time.push(now);//現在の再生時間を配列に入れる
		
						var text=[];
					for (var i = 0; i < memodata.length; i++) {
						jikan=time[i];
						if(byou[i]<10){
						text.push('<li>'+　'<a href="javascript:move("+jikan+");">'　+　"【" + minute2[i]  +":" +"0"+ byou[i]+ "】" +'</a>'+ memodata[i] + '</li>');
						}else{
						text.push('<li>'+　'<a href="javascript:move("+jikan+");">'　+　"【" + minute2[i]  +":" + byou[i]+ "】" +'</a>'+ memodata[i] + '</li>');
					}
					}	
			//innerHTMLを使用して表示
			var txt = document.getElementById("txt");
			txt.innerHTML = text.join('');
					}

				//保存された再生時間を押した時
					function move(start) {
						video.currentTime = start;
					}
		

Comments

[m.ts10806]

もうちょっと、インデントきちんと整形されたほうが。。
手動ではなくフォーマット機能のついたエディタか整形サービス使ってください。

[seriko]

コメントありがとうございます。
インデントを修正しました。

[m.ts10806]

ほとんど変わってないように見えます

Answer 1

1. for文でjikanにはvar/letを使ってませんので、saveを実行した後、jikanは一番最後に書かれた値になっております。なのでいつも9秒なのです。

2. "javascript:move(jikan);"ではjikanは文字列です。なのでクリックした時点でのjikan変数がmove関数に渡されます。正確には"javascript:move("+jikan+");"のはずです。

Comments

[seriko]

回答ありがとうございます。
修正していただいた通りに
text.push('<li>'+　'<a href="javascript:move("+jikan+");">'　+　"【" + minute2[i] +":" + byou[i]+ "】" +'</a>'+ memodata[i] + '</li>');
と書き直したのですがUncaught SyntaxError: Unexpected end of inputというエラーが出ます。
そもそもなぜjikan変数を+で囲むのかがわからないのでもしよろしければ教えていただけるとありがたいです。

[skys215]

'<a href="javascript:move("+jikan+");">'ここが間違ってます
'<a href="javascript:move('+jikan+');">'のはずです。
いや、+で囲むのではありません。jikanの値をmove(と)の間に入れるのです。

javascript:move(jikan);だと、htmlに表示されるのはjavascript:move(jikan);そのままです。
クリックした時点のjikanの値をmove関数に渡されます。
実際やりたいのはtext.pushした時点でのjikanの値なので、jikanの値をhtml表示すれば良いです。
つまり、'<a href="javascript:move("+jikan+");">'だと'<a href="javascript:move(157);">'とか'<a href="javascript:move(289);">'に表示されます。
<a href="javascript:move(jikan);">だと表示されるので、どこでも<a href="javascript:move(jikan);">と表示します。それでクリックした時、jikanが347であれば347がmoveに渡され、893であれば893を渡します。text.pushの時点のjikanの値ではありません。

jikanはfor文の中でletを使ってないので、for文の外でもjikanは使えます。開発者ツールのコンソールでjikanと入力すれば一番最後のメモ時間が出てくるはずです。なのでどのリンクをクリックしてもその時間にしか飛びません。

[seriko]

修正したところ無事時間が上書きされずに動きました。htmlで表示すれば良かったのですね。
また、なぜ思うように動かなかったのかも理解できました。
本当に助かりました、ありがとうございました！