Question

我试图通过VanillaJS或jQuery选择DOM元素。无论哪种方式，他们都在我的ejs文件中生成未定义。

我将所有库加载到ejs的顶部。

在页面中间我有一个简单的

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

在页面的下方，我有一个id为“showorders”的表格。

如果语句为true，我想要做的就是将表的可见性设置为隐藏。否则继续运行页面并执行正常过程。

为什么值未定义？

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"
});

EJS无法访问导致未定义的DOM元素

2 个答案: