受信 'Uncaught TypeError：インデックス以外のすべてのページで' addEventListener 'of null'プロパティを読み取れませんか？

Question

Framework7でアプリケーションを作成していて、ブラウザのローカルストレージにテキストを送信できるセクションを追加しようとしています。フォームを使用してindex.htmlページのデータを送信すると問題なく動作しますが、他のページで使用するとUncaught TypeError： 'addEventListener' of null 'プロパティを読み取れません。私は同じ場所の各ページの下にあるスクリプトsrcをリンクしているので、なぜこのエラーが出るのか分かりません。

HTML

<form> 
    Text: <br> 
    <input type="text" id="Input"  name="addText"> <br> 
    <button id="Submit">Save</button> 
</form> 

Javascriptを

var submit = document.getElementById("Submit"); 

    submit.addEventListener("click", function() 
    { 
     var Input = document.getElementById("Input").value; 
     localStorage.setItem("Text", Input); 
     alert("Your text has been saved"); 
     console.log("Text saved"); 
    } , false); 

Answer 1

Framework7には、jQueryのような機能があり、dom7または$$と呼ばれています。

$$("#Submit").on("click",function() { 
    var Input = $$("Input").val(); 
    localStorage.setItem("Text", Input); 
    alert("Your text has been saved"); 
    console.log("Text saved"); 
}); 

私はJSフィドルに-あるように動作するようにコードを取得することができたドキュメントにhere

Answer 2

これは、あなたが行うとき以来起こる：

var submit = document.getElementById("Submit"); 

submitはとなり送信ボタンは他のページでは使用できないため、となります。

すぐに解決できるのは、送信ボタンが現在のページに存在するかどうかを確認してから、イベントリスナーを追加することです。

if(submit){ 
    submit.addEventListener("click", function() { 
     var Input = document.getElementById("Input").value; 
     localStorage.setItem("Text", Input); 
     alert("Your text has been saved"); 
     console.log("Text saved"); 
    } , false); 
}