メニューボタンが内側のページで正しく機能しない

Question

これは私のホームページですhttp://www.hawaiidolphinswim.com/skin/tabid/92/Default.aspxメニューをクリックすると拡大し、ページ上の他の場所をクリックすると隠れます。これは、サイト全体で作業する方法です。ただし、他のページ（たとえば、http://www.hawaiidolphinswim.com/contact.htm）では、メニューをクリックしてページの他の場所をクリックすると、そのページは非表示になりません。メニューは、ホームページ上のようあまりにも内部のページに同じように隠すように、私はこの問題を解決するにはどうすればよい

function navFunction() { 
    var x = document.getElementById("nav"); 
    if (x.className === "nav"){ 
    x.className += " active"; 
    } else { 
    x.className = "nav"; 
    } 
    return false; 
} 
$(document).on("click", function(e){ 
    var y = $("#nav").children(); 
    var z = $(".menu-btn b"); 
    if ($(e.target).is(y) || $(e.target).is(z)){ 
    // console.log("navigation related"); 
    }else{ 
    // console.log("not navigation related"); 
    $(".nav").removeClass("active"); 
    } 
}); 

：これは、これを行うために使用されるコードのですか？

Answer 1

クロム開発ツールや問題のあるページの他のウェブデバッガでgetEventListeners(document)を実行すると、clickイベントがページに追加されていないことがわかります。

つまり、コードがドキュメントの準備が完了する前に実行されたため、クリックイベントリスナーが機能していません。あなたのJavaScriptコードはの前にのHTML DOMが作成されたので、リスナーを設定できませんでした。

は次のように準備ができてブロック内にコードを配置しようとすると：

$(document).ready(function(){ 
    // Put all your js code here 
}); 

その方法は、あなたはドキュメントがロードされ、イベントリスナーが正しく設定することができることを確認することができます。

Answer 2

あなたのページに存在しないIDを取得しようとしており、エラーが発生し、スクリプトの機能が妨げられています。

var video = document.getElementById("youtube"); // this id doesn't exists in the contact me page. 

実行if文の内部videoコード、videoがnullでない場合

if (video) { 
    var source = "https://i.ytimg.com/vi/50CxpeBse9Y/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=UK441E57Ci7ahRUgUu9ZjjwTRUU"; //youtube thumbnail source// 
    var image = new Image(); 
    image.src = source; 
    image.addEventListener("load", function(){ 
      video.appendChild(image); 
     } 
    ); 
    video.addEventListener("click", function(){ 
     var iframe = document.createElement("iframe"); 
     iframe.setAttribute("frameborder","0"); 
     iframe.setAttribute("allowfullscreen",""); 
     iframe.setAttribute("src","https://www.youtube.com/embed/50CxpeBse9Y?autoplay=1"); //youtube video source// 
     this.innerHTML = ""; 
     this.appendChild(iframe); 
    }); 
}