EJSが未定義のDOM要素にアクセスできない

Question

VanillaJSまたはjQueryを使用してDOM要素を選択しようとしています。いずれにせよ、彼らは私のejsファイル内で未定義を生成しています。

すべてのライブラリをejの一番上にロードします。ページの中央に

は、私は、ID「showorders」を持つテーブルがページ下にさらにシンプル

<% if (somevariable < 1) { %> 
    <!-- do something --> 
    <script> document.getElementById("showorders").style.visibility = "hidden" </script> 
    <% } %> 

持っています。

私がしたいのは、文が真であれば、表の可視性を非表示に設定することだけです。それ以外の場合は、ページを終了して通常の処理を続けます。

なぜ値は未定義ですか？

Answer 1

スクリプトに存在しない要素への参照があるため、問題が発生することがあります。
DOMロードイベントを待つ必要があります。

バニラ

<% if (somevariable < 1) { %> 
<!-- do something --> 
<script> 
    document.addEventListener("DOMContentLoaded, function() { 
     document.getElementById("showorders").style.visibility = "hidden"; 
    }, false); 
</script> 
<% } %> 

jQueryの

<% if (somevariable < 1) { %> 
<!-- do something --> 
<script> 
    jQuery(function() { 
     jQuery("#showorders").css("visibility", "hidden"); 
    }); 
</script> 
<% } %> 

Answer 2

ブラウザは、ページを解析停止しscriptタグを検出し、スクリプトを実行します。これは、document.writeがページ内の現在の位置にコンテンツを追加する方法です。

DOMが完全に解析された後にスクリプトを実行する場合は、DOMContentLoadedイベントを待機する必要があります。

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("showorders").style.visibility = "hidden" 
});