如何修复 javascript 中未定义的 div？

Question

例如我输入

var x1 = document.getElementsByClassName('js-ticket-count');

未定义 & HtmlCollection ！

x1 = document.getElementsByClassName('js-ticket-count')[0];

它返回未定义？ 为什么？

Html 代码：

<div class='js-ticket-count'>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<p id='style-1'>test<p>
<div>
**More Html Stuff Here**
 </div>
                    </div>

Answer 1

尝试将您的 JS 放在 onload 侦听器中。 否则，您的 JS 很可能在元素加载到 DOM 之前正在运行。

window.onload = function(){
    alert(document.getElementsByClassName('js-ticket-count')[0]);
}

您看到的HtmlCollection基本上是一个元素数组，因为可能有多个元素具有某个 class 名称。 您使用[0]返回第一个元素。

Answer 2

您可以使用DOMContentLoaded事件来确保文档是这样加载的：

document.addEventListener("DOMContentLoaded", function(){
    var x1 = document.getElementsByClassName('js-ticket-count');
        x1 = document.getElementsByClassName('js-ticket-count')[0];
    console.log(x1)
})

您还可以像这样在 window object 上使用load事件：

window.addEventListener("load", function(){
    var x1 = document.getElementsByClassName('js-ticket-count');
        x1 = document.getElementsByClassName('js-ticket-count')[0];
    console.log(x1)
})

还要确保您的script标签在body标签之前关闭，以确保每个元素都已加载。

Answer 3

如果您使用的是外部 JS 文件，则可以将其添加到 body 元素的末尾。 因此，您的 JS 文件将在加载完所有 HTML 元素后加载。 这样，JS就可以读取到HTML元素了。 像这样的东西：

<body>
    <div class='js-ticket-count'>
    <p id='style-1'>test<p>
    <p id='style-1'>test<p>
    <p id='style-1'>test<p>
    <p id='style-1'>test<p>
    <p id='style-1'>test<p>
    <div>
    **More Html Stuff Here**
     </div></div>
     
     <script srs="externalJSlink.js"></script>
</body>

如何修复 javascript 中未定义的 div？

问题描述

3 个解决方案

解决方案1
1 2020-07-18 22:23:37

解决方案2
0 已采纳 2020-07-18 22:35:45

解决方案3
0 2020-07-18 22:38:56

如何修复 javascript 中未定义的 div？

问题描述

3 个解决方案

解决方案1 1 2020-07-18 22:23:37

解决方案2 0 已采纳 2020-07-18 22:35:45

解决方案3 0 2020-07-18 22:38:56

解决方案1
1 2020-07-18 22:23:37

解决方案2
0 已采纳 2020-07-18 22:35:45

解决方案3
0 2020-07-18 22:38:56