Question

我不明白为什么以下代码返回的terminalContainer为null：

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>所以消息＆＃34; terminalContainer：null＆＃34;在控制台中出现4次，这意味着我的div存在吗？

我不理解什么？

Answer 1

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

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

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

还有其他方法可以推迟脚本执行，直到页面加载完毕，但有很多答案可以解决如何在StackOverflow上执行此操作。这个答案可以解释为什么你得到null。

为什么我的`<div id =“terminal-container”>`为空？

1 个答案: