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

Question

我正在尝试通过 VanillaJS 或 jQuery 选择 DOM 元素。无论哪种方式，他们都会在我的 ejs 文件中生成 undefined。

我在 ejs 顶部加载所有库。

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

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

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

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

为什么这些值未定义？

Answer 1

出现此问题的原因可能是您的脚本中引用了不存在的元素。
您应该等待 DOM 加载事件。

Vanilla

<% 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>
<% } %>