Q&A
タイミングの問題だったのですね・・・。
ご教授いただいた方法で動かすことができました。
早急にご回答いただきありがとうございました。
前提・実現したいこと
JavaScriptで画像が自動切り替えできるようにコードを書きましたが
以下のエラーメッセージが発生しました。
Uncaught TypeError: Cannot set properties of null (setting 'src') at slideshow_timer (top.js:11) at top.js:4
該当のソースコード
html
1<script type="text/javascript" src="/JS/top.js"></script> 2 3<main> 4 <div> 5 <img id="mainpic" src="/image/main1.jpg" alt="mainpics"> 6 </div> 7</main>
JavaScript
1var pics_scr = new Array("/image/main1.jpg","/image/main2.jpg","/image/main3.jpg"); 2var num = -1; 3 4slideshow_timer(); 5 6function slideshow_timer() { 7 num ++ 8 if (num == pics_scr.length) 9 num = 0; 10 //console.log(num); 11 document.getElementById("mainpic").src = pics_scr[num]; 12 setTimeout("slideshow_timer()",3000); 13}
試したこと
slideshow_timer()のカウントが動くことは確認しました。
うまくhtmlへ反映させられていないのが原因かと思うのですが（scrに反映できない・・・）
解決方法が分からず質問させていただきました。
ファイルの階層は下記の通りです。
<image> ┣<images> ┃┣<main1.jpg> ┃┣<main2.jpg> ┃┗<main3.jpg> ┣<JS> ┃┗<top.js> ┗<html>
回答2件
0
ベストアンサー
エラーの通りです。
エラーメッセージの読み方と対処, 検索や質問の原則
Cannot set properties of null (setting 'src')
nullのプロパティを設定できません（ 'src'を設定）
console.logでの確認をされているので「惜しい」のですが、
document.getElementById("mainpic")がnullなのです。
コードを見た感じ、jsの読み込みが先に来ており、HTML全体の読み込みを待たずに実行されているようなので、対象のコードが実行されているときに要素mainpicが読み込まれてない状態となります。
そのためnull。
投稿2022/01/07 08:53
総合スコア80875
0
本来DOMの作成を待ってから処理をすればいいのですが、とりあえず動かすだけならこう
javascript
1<script type="text/javascript" src="/JS/top.js"></script> 2↓↓↓ 3<script type="text/javascript" src="/JS/top.js" async></script>
投稿2022/01/07 08:50
編集2022/01/07 08:51
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/07 09:16
2022/01/07 09:18