nullのプロパティ 'value'を読み取ることができません。私は私のウェブサイトの他のページ

Question

にいるとき、私は1つを使用して、このようなラインを持つ関数で例えば「backend.js」 は、すべてのウェブサイトのページそう

ためのJavaScript/jQueryのコードが含まれていると、というJavaScriptファイル：

var latit = document.getElementById('lat').value; 

それはIDが含まれているページ上で正常に動作します=「LAT」 が、他のページでは、私は、コンソールでこのエラーを得た：

Uncaught TypeError: Cannot read property 'value' of null

をしても、スタイルを持つ：

Uncaught TypeError: Cannot read property 'style' of null

これは、行の下の他の機能の実行を停止させます。

すべてのファイルにはdocument.getElementByIdコードの行があります。

---

私は解決策を見つけたが、それは最高のか、それはこのように私のファイル内の任意のdocument.getElementByIdためのテストをするために私の解決策

よりよいがある場合、私は知らない。

if (document.getElementById('lat') != null) { 
    var latit = document.getElementById('lat').value; 
} 

これは最適なソリューションですか？

Answer 1

getElementByIdを2回呼び出す必要はありません。最初の呼び出しの結果を変数に格納することができます。

var lat = document.getElementById('lat'); 
if(lat) { 
    var latit = lat.value; 
} 

あなたは追加の変数をしたくない場合は、Object.prototype.valueが存在しないかと心配しているならば、あなたも

var latit = (document.getElementById('lat') || {}).value; 

または|| Object.create(null)を使用することができます。

Answer 2

これらのエラーが発生するのは、作成しているWebアプリケーションにさまざまな状態があり、指定した要素がすべてではないということです。

これはSPAのWebアプリ（単一ページアプリ）に問題がある場合は、あなただけのアプリで各ページのための適切なJavaScriptをロードしているようにをルーティングある程度を達成する必要があります。

これは多くのページで使用されている図書館であれば、そのページをチェックしてそこにある必要がある要素だけを想定する必要があります。

これは1ページのみで使用されるライブラリの場合、動的に変更されますがSPA以外のWebアプリケーションであるため、アプリケーション状態をチェックし、そこに存在する必要がある要素を想定する必要があります。