为什么我的 `<div id="terminal-container">` 为空？ [复制]答案

【问题标题】：Why my `<div id="terminal-container">` is null? [duplicate]为什么我的 `<div id="terminal-container">` 为空？ [复制]
【发布时间】：2017-01-17 16:07:20
【问题描述】：

我不明白为什么下面的代码返回终端容器为空：

var terminalContainer = document.getElementById('terminal-container');
console.log("terminalContainer:" + terminalContainer);

但是在我的 HTML 中我定义了它：

<li class="liContainer">
        <div>
            <h3>{{nameContainer}}</h3>
        </div>
        <div id="idContainer">
            <span>ID: {{idContainer}}</span>
        </div>
        <div id="stateContainer">
            <span class="state">State: {{stateContainer}}</span>
        </div>

        <div id="terminal-container"></div>
        <div class="terminal"></div>


          <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
          <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
          <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
          <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
          <button type="button" class="cmdLogs"> </button>
    </li>

我的应用程序的结果是我有 4 个 <li> 所以消息“terminalContainer: null”在控制台中出现了 4 次，这意味着我的 div 存在吗？

我不明白什么？

【问题讨论】：

请显示更多代码。目前尚不清楚何时、何地或如何调用代码的重要部分。您可能正在调用一个函数，而不是将该函数作为参数传递给某处。
工作正常here。这是你所有的代码吗？您是否有多个 li 元素包含具有相同 id 的 div？
你的代码对我有用。
你确定你的JS代码是在“terminal-container”元素可用后执行的吗？
我应该使用 class 而不是 id 吗？

标签： javascript html meteor

【解决方案1】：

这很可能是由于您的脚本在页面加载之前运行。 <head> 中的脚本将在加载后立即运行，这通常是在正确创建 DOM 之前。该脚本仍将执行，但它无法找到任何元素，因为它们都不存在。

解决此问题的最简单方法是将脚本标记放在<body> 的末尾，而不是放在头部。

<body>
  ...
  <script src="myscript.js"></script>
</body>

还有其他方法可以将脚本执行推迟到页面加载完毕，但在 StackOverflow 上有很多关于如何做到这一点的答案。这个答案可以解释为什么你会收到nulls。

【讨论】：

我们不需要另一个回答这个问题。
随意将其标记为重复。我在回答为什么它出现 null 这比“我如何推迟脚本执行直到页面加载”更加模棱两可
不，这不是因为脚本加载，因为代码的所有其他部分都有效
@Jerome：很多事情都可以解决这个问题。 getElementById 没有损坏。如果在您运行时，您的 DOM 中有一个具有该 ID 的元素，它将将该元素返回给您。它返回 null 的唯一原因是当时 DOM 中没有这样的元素（链接问题的答案）。那就是问题所在。你的工作是找出为什么在你运行它时，DOM 中没有具有该 ID 的元素。
@Jerome 也许你应该用更多的代码更新你的问题。获取null 元素不会停止脚本运行。