Javascript 无法获取属性'；parentNode'；指未定义的或空的引用

我的javascript程序基本上创建了一系列图像，并随机选取一个图像，然后将其src设置为特定路径。然而，由于某些原因，代码有时似乎会卡住。在我的程序中，我调用了其中一个映像的element.parentNode，以便用锚定标记将其包围，但它抛出了一个控制台错误，表示它无法获取未定义或空引用的属性“parentNode”，尽管有时代码实际执行时没有对代码进行任何更改。我必须刷新多次，才能幸运地避免抛出错误，并顺利执行其余代码。 这是我的密码：

var id = generateRandom(325);
var el = document.getElementById(id.toString());
var anchor = document.createElement("a");
var nextPage = "level" + (level + 1).toString() + ".html";
if (level == 3) {
    nextPage = "win.html";
}
anchor.setAttribute("href", nextPage);
el.parentNode.insertBefore(anchor, el); // line 54

错误：

    SCRIPT5007: Unable to get property 'parentNode' of undefined or null reference
scripts.js (54,2)

编辑： 更新了整个函数

var div = document.getElementById("images");
var time = parseInt(document.getElementsByClassName("timer")[0].innerHTML);
var level = getLevel(time);
var rows = 13;
var cols = 23;
for (var i = 1; i <= rows; i++) {
    var marquee = document.createElement("marquee");
    marquee.setAttribute("scrollamount", 30);
            for (var j = 1; j <= cols; j++) {
        var img = document.createElement("img");
        img.setAttribute("src", getPath());
        img.setAttribute("id", (i * j).toString());
        img.setAttribute("width", "80px");
        img.setAttribute("height", "70px");
        marquee.appendChild(img);
    }
    div.appendChild(marquee);
}
var id = generateRandom(rows * cols);
var el = document.getElementById(id.toString());
var anchor = document.createElement("a");
var nextPage = "level" + (level + 1).toString() + ".html";
if (level == 3) {
    nextPage = "win.html";
}
anchor.setAttribute("href", nextPage);
el.parentNode.insertBefore(anchor, el);
var input = document.createElement("input");
input.setAttribute("type", "image");
input.setAttribute("width", "80px");
input.setAttribute("height", "70px");
input.setAttribute("src", "resources\\asotigue.jpg");
el.parentNode.replaceChild(input, el);
anchor.appendChild(input);

---

现在编辑，因为您已经包含了更多的代码：您正在生成

13*23=299

元素，但选择的随机元素最多为

325

，因此有时您没有足够的元素进行随机选择

---

因此，这段代码告诉您的是，

el

变量是

undefined

或

null

。这可能有几个原因：

您的

generateradom（325）

正在生成页面中不存在的id值

您正在调用

document.getElementById（id.toString（））在页面完成加载和解析之前，因此某些页面元素尚未出现。在加载页面之前，不应运行脚本，方法是将其移动到
的末尾，或等待触发
DOMContentLoaded
事件

仅供参考，如果您的问题是第二个，您可以在这里阅读使用纯Javascript的各种解决方案

---

如果您知道有时

generateradom（325）

会选择一个不在页面中的元素id，并且您希望允许这样做，但要防止它停止代码的执行，那么您可以检查该条件：

var id = generateRandom(325);
var el = document.getElementById(id.toString());
var anchor = document.createElement("a");
var nextPage = "level" + (level + 1).toString() + ".html";
if (level == 3) {
    nextPage = "win.html";
}
anchor.setAttribute("href", nextPage);
if (el) {
    el.parentNode.insertBefore(anchor, el);
}

---

为了帮助您追踪偶尔出现的错误，请在此之后：

var id = generateRandom(rows * cols);
var el = document.getElementById(id.toString());

您可以添加以下额外的调试代码：

// add this to detect what situation you get a missing element
if (!el) {
    console.log("did not find id when: rows = " + rows + ", cols = " + cols");
}

---

现在编辑，因为您已经包含了更多的代码：您正在生成

13*23=299

元素，但选择的随机元素最多为

325

，因此有时您没有足够的元素进行随机选择

---

因此，这段代码告诉您的是，

el

变量是

undefined

或

null

。这可能有几个原因：

您的

generateradom（325）

正在生成页面中不存在的id值

您正在调用

document.getElementById（id.toString（））在页面完成加载和解析之前，因此某些页面元素尚未出现。在加载页面之前，不应运行脚本，方法是将其移动到
的末尾，或等待触发
DOMContentLoaded
事件

仅供参考，如果您的问题是第二个，您可以在这里阅读使用纯Javascript的各种解决方案

---

如果您知道有时

generateradom（325）

会选择一个不在页面中的元素id，并且您希望允许这样做，但要防止它停止代码的执行，那么您可以检查该条件：

var id = generateRandom(325);
var el = document.getElementById(id.toString());
var anchor = document.createElement("a");
var nextPage = "level" + (level + 1).toString() + ".html";
if (level == 3) {
    nextPage = "win.html";
}
anchor.setAttribute("href", nextPage);
if (el) {
    el.parentNode.insertBefore(anchor, el);
}

---

为了帮助您追踪偶尔出现的错误，请在此之后：

var id = generateRandom(rows * cols);
var el = document.getElementById(id.toString());

您可以添加以下额外的调试代码：

// add this to detect what situation you get a missing element
if (!el) {
    console.log("did not find id when: rows = " + rows + ", cols = " + cols");
}

---

此方法将收集当前页面上具有特定类的项目的所有ID，并随机返回其中一个ID

你可以在这张照片上看到它的作用。检查控制台

function getIdsListByClassName(className) {
    var elements = document.querySelectorAll('[id].' + className); // get all items that have the id attribute and the defined class name

    var ids = Array.prototype.slice.call(elements, 0).map(function (element) {
        return element.getAttribute('id');
    }); // convert the elements list to array, and map it to ids

    var currentIndex = Math.floor(Math.random() * ids.length); // get an index between 0 and ids.length - 1

    return ids[currentIndex];
}

---

此方法将收集当前页面上具有特定类的项目的所有ID，并随机返回其中一个ID

你可以在这张照片上看到它的作用。检查控制台

function getIdsListByClassName(className) {
    var elements = document.querySelectorAll('[id].' + className); // get all items that have the id attribute and the defined class name

    var ids = Array.prototype.slice.call(elements, 0).map(function (element) {
        return element.getAttribute('id');
    }); // convert the elements list to array, and map it to ids

    var currentIndex = Math.floor(Math.random() * ids.length); // get an index between 0 and ids.length - 1

    return ids[currentIndex];
}

---

显然，您的

generateRandom（）

函数有时会返回一个在DOM中不存在的ID函数有时返回一个在DOM中不存在的ID。我要查找的所有元素实际上都是由JavaScript代码本身生成的，因此这些元素应该在特定代码生成时出现run@JavaFanatic-我毫不怀疑它们“应该”可以从您的其他代码中获得，但是很明显有些东西不正确，或者

el

不会是

null

。也许您的其他代码中有一个错误，它没有生成您认为应该生成的所有内容，或者没有将它们全部插入DOM中，以便使用

document.getElementById（）

。谢谢。）我意识到我的代码有一个错误，它涉及到一个误算。我修改了它，这样随机数的上限实际上是由行*列设置的，而不是一个固定值number@JavaFanatic-是的，我刚刚看到

13*23=299

比

325

小，所以你缺少元素。我再次更新了我的代码，它使用了两个变量，行和列，用于循环和计算。然而，在某些情况下，我仍然会遇到同样的错误。我是否还遗漏了其他一些错误？我要查找的所有元素实际上都是由JavaScript代码本身生成的，因此这些元素应该在特定代码生成时出现run@JavaFanatic-我毫不怀疑它们“应该”可以从您的其他代码中获得，但是很明显有些东西不正确，或者

el

不会是

null

。也许您的其他代码中有一个错误，它没有生成您认为应该生成的所有内容，或者没有将它们全部插入DOM中，以便使用

document.getElementById（）

。谢谢。）我意识到我的代码有一个错误，它涉及到一个误算。我改变了它，所以随机数的上限实际上是