質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

4465閲覧

getElementByIdで取得する値が途中からnullになってしまう

niutsuhime

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/20 10:39

前提・実現したいこと

 知人のイラストサイトを作成しており、メニューにある「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/ツールのバージョンなど)

クロームで実装のテストをしています。

独学ですのでわかりにくい書き方や見苦しい書き方をしているところも多々あると思いますが、どうか検討していただけると幸いです。
最後まで目を通していただきありがとうございました。
なにとぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/03/20 10:48

当方の環境ではご提示のコードで問題が再現しませんでした。ご提示いただいていないコードに原因があるのかもしれません。または、質問者の環境ではご提示のコードで問題が再現するようでしたら、環境に問題があるのかもしれません。
defghi1977

2018/03/20 11:25

対症療法的ですが, null判定してnullだったら処理をしないとか駄目ですかね.
guest

回答1

0

直接関係ないかもしれませんが
jump("gallery");
の場合の処理が抜けていませんか?
あと、グローバル変数の多用はデバッグをしにくくさせているかもしれません。

投稿2018/03/20 12:41

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問