Q&A
</id>は不要です。
画像自動切り替えプログラム
時間ごとに自動で画像が切り替わるプログラムを作っていたのですが、エラーが出てよく分かりません。
STARTボタンでタイマーが発生し自動で切り替わる
STOPボタンで一時停止
RESETボタンで最初の画面に切り替わる
これを作っていたところ、画像が切り替わる瞬間にエラー。そしてRESETボタンをクリックしたらエラー
エラー文を読んでもよく分かりませんでしたので質問させていただきました。
学生のため、答えだけではなくなぜエラーになってたのかまで教えていただけると幸いです。おこがましくてすいません。
発生している問題・エラーメッセージ
//STARTボタンの場合 Uncaught TypeError: Cannot set property 'innerHTML' of null at imgChange //RESETボタンの場合 Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.timerReset
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像切り替えプログラム</title> <style> div.sample { width: 200px; height: 200px; margin: 5px; padding: 20px; border: 1.5px solid rgb(243, 165, 92); background-color: white; } </style> <script> window.onload = function() { //ボタンの準備 var start = document.getElementById("start"); var stop = document.getElementById("stop"); var reset = document.getElementById("reset"); //タイマーの準備 var timer; var cnt = 0; //画像番号の準備 var imgNo = 0; //クリックしたときの準備 start.addEventListener("click", timerStart); stop.addEventListener("click", timerStop); reset.addEventListener("click", timerReset); function timerStart() { timer = setTimeout(imgChange, 5000); } function timerStop() { clearTimeout(timer); } function timerReset() { timerStop(); var img = document.getElementById("img"); img.innerHTML = "はじめ"; } function imgChange() { imgNo++; if(imgNo > 7) { imgNo = 1; } var img = document.getElementById("img") var px; switch(imgNo) { case 1: px = "<img src='pic/a.jpg'>"; break; case 2: px = "<img src='pic/b.jpg'>"; break; case 3: px = "<img src='pic/c.jpg'>"; break; case 4: px = "<img src='pic/d.jpg'>"; break; case 5: px = "<img src='pic/e.jpg'>"; break; case 6: px = "<img src='pic/f.jpg'>"; break; case 7: px = "<img src='pic/j.jpg'>"; break; default: px = "画像がありません"; break; } img.innerHTML = px; timer = setTimeout(imgChange, 5000); } } </script> </head> <body> <h2>画像切り替えプログラム</h2> <div class="sample"> <id="img">はじまり</id> </div> <button id="start">START</button> <button id="stop">STOP</button> <button id="reset">RESET</button> </body> </html>
回答3件
0
「id」というHTML要素は無いです。また、getElementByIdで取得したいのであれば、id属性をつけましょう。
HTML
1<!--<id="img">はじまり</id> 2 ↓ ↓ --> 3 <div id="img">はじまり</div>
投稿2019/07/18 13:41
総合スコア69407
0
ベストアンサー
<div class="sample">
<id="img">はじまり</id>
</div>
を
<div class="sample">
<div id="img">はじまり</id></div>
</div>
にすればいけました。ありがとうございました。
投稿2019/07/18 13:39
退会済みユーザー
総合スコア0
そうなんですか。分かりやすい解説ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。