前提・実現したいこと
知人のイラストサイトを作成しており、メニューにある「home/about/gallery/contact」をクリックすると、サイトがアニメーションをしながらそのページに切り替わるという処理を行っています。
HTMLが分かる知人が自分でも中身を書き換えられるように、html内部に"display:none;"の箇所を作り、その内部に存在する各divの内部をhtmlで書き換えることにより、メニューの文字をクリックするとその度にjsファイルがdocument.getElementById(id)でhtmlファイルの該当するhtmlコードを引っ張ってくる、というコードを書きました。
発生している問題・エラーメッセージ
何度かはうまく行くのですが、メニューを何度もいろんな項目をクリックしているとそのうち切り替わるページが真っ白になってしまいます。なんでだろう?と調べてみると、getElementByIdで返ってくる値が途中からnullになっていることに気がつきました。
補足として、同じ項目をクリックし続けていてもnullにはならず適切な値を返してきます。二種類ならやや大丈夫で、メニューの項目を三種類交互にクリックするとnullになりやすいようです。
また、nullになるタイミングは完全にランダムではなくある程度法則性があることや、nullの値を返してくるページがあってもその後何度かは正確な値を返し続けてくるページがあることなどが分かりました。
該当のソースコード
※galleryに関しては画像中心のページになりますので、他の箇所で処理をしています。
html
1<div id="menu"> 2 <span id="menuHome">home</span> 3 <span id="menuAbout">about</span> 4 <span id="menuGallery">gallery</span> 5 <span id="menuContact">contact</span> 6</div> 7<div id="main"> 8 <div id="home2"> 9 </div> 10</div> 11 12 13<!--「画像の追加・差し替え以外で」内容を書き換えたい場合は以下の内容を書き換えること--> 14<div id="pageContents"> 15 16 <div id="contentsHome"> 17<!--"home"ページを書き換えたいならここを書き換える--> 18<!--改変する時はここから下をコピペ--> 19<!--改変する時はここから上をコピペ--> 20 </div> 21 22 <div id="contentsAbout"> 23<!--"about"ページを書き換えたいならここを書き換える--> 24<!--改変する時はここから下をコピペ--> 25aboutだよ 26<!--改変する時はここから上をコピペ--> 27 </div> 28 29 <div id="contentsContact"> 30<!--"contact"ページを書き換えたいならここを書き換える--> 31<!--改変する時はここから下をコピペ--> 32contactだよ 33<!--改変する時はここから上をコピペ--> 34 </div> 35 36</div>
js
1var nowPage; 2var pageContents; 3 4$('#menuHome').on('click', function(){ 5 jump("home"); 6}) 7$('#menuAbout').on('click', function(){ 8 jump("about"); 9}) 10$('#menuGallery').on('click', function(){ 11 jump("gallery"); 12}) 13$('#menuContact').on('click', function(){ 14 jump("contact"); 15}) 16 17function jump(page = "home"){ 18 nowPage = page; 19 inContents(); 20console.log(pageContents); 21 nowAnimation();//アニメーション中かどうかを判定、相応の対応をする 22 pageJump();//galleryとそうでない時とで書き換え方を変える 23//中略、アニメーションの指示等々 24} 25 26function inContents(){ 27 if(nowPage === "home"){ 28 pageContents = document.getElementById("contentsHome"); 29 } else if(nowPage === "about"){ 30 pageContents = document.getElementById("contentsAbout"); 31 } else if(nowPage === "contact"){ 32 pageContents = document.getElementById("contentsContact"); 33 } 34}
補足情報(FW/ツールのバージョンなど)
クロームで実装のテストをしています。
独学ですのでわかりにくい書き方や見苦しい書き方をしているところも多々あると思いますが、どうか検討していただけると幸いです。
最後まで目を通していただきありがとうございました。
なにとぞよろしくお願いします。