Question

这是我的JS

var linkArray = {
    boothsizeDiv_link: false,
    furnishingsprovidedDiv_link: false,
    electricalDiv_link: false,
    rentalfurnishingsDiv_link: false,
    gesgraphicsDiv_link: false,
    geslaborDiv_link: false,
    contractorDiv_link: false,
    carpetingDiv_link: false,
    boothlightingDiv_link: false,
    javitsDiv_link: false,
    boothsealDiv_link: false,
    mannequinsDiv_link: false,
    calcDiv_link: false
};
for (var i in linkArray) {

    if (linkArray['boothsizeDiv_link'] == false) {

        document.getElementById('jumplinks').style.display = 'block';
        document.getElementById('boothsizeDiv_link').style.display = 'block';
    }
}

html是

<div id="jumplinks" align="left" style="display:none;">

 <div id="boothsizeDiv_link" style="display:none;"><a href="#" onclick="ToggleLinks('boothsizeDiv');"><font face="calibri">BOOTHSIZE</font></a></div>

</div>

在我的html文件中，标识为jumplinks的div为style='display:none;' 当我尝试运行JS文件时，可以说document.getElementById('jumplinks')是null。问题是什么？需要帮助..

Answer 1

如评论中所述，您无需迭代linkArray来查找其长度。使用linkArray.length查找数组长度。也许：

console.log("linkArray length is: " + linkArray.length);

关于null错误，你能告诉我们你在哪里调用javascript吗？你可以在头部的函数中包含JS，并从其他地方调用该函数。以下代码也可用作切换，允许您隐藏div：

<script>

function togLinks() {
    if (linkArray['boothsizeDiv_link'] == false) {

        var jumplinks = document.getElementById('jumplinks');
        var boothsizeDiv_link = document.getElementById('boothsizeDiv_link');

        jumplinks.style.display = jumplinks.style.display == "block" ? "none" : "block";
        boothsizeDiv_link.style.display = boothsizeDiv_link.style.display == "block" ? "none" : "block";
    }
}

</script>

致电toglinks：

<div onclick="togLinks()">show/hide links</div>

Answer 2

您应该只在DOM加载完成后执行Javascript，因此上述操作仅在document.ready事件触发后才能执行。如果您在页面的<head>中运行代码，则会在元素实际存在之前运行，因此它是null。

以下是使用普通Javascript挂钩到该事件的示例： $(document).ready equivalent without jQuery

document.getElementById（'xxx'）显示null

2 个答案: