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

我的JavaScript程序基本上创建一系列图像，并随机选取一个并将其src设置为特定路径。但是，由于某些原因，代码似乎有时会卡住。在我的程序中，我调用其中一个图像的element.parentNode，以便用一个锚标记来包围它，但它会抛出一个控制台错误，指出它无法获取未定义或空引用的属性'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);

generateRandom功能：

function generateRandom(n) { 
    return Math.floor((Math.random() * n) + 1); 
}

来源

2015-08-16 JavaFanatic

显然你的'generateRandom（）'函数有时会返回一个在你的DOM中不存在的ID。 – slash197

现在编辑您已包含更多代码：您正在生成13 * 23 = 299元素，但选择了一个随机元素高达325，因此有时您没有足够的元素用于随机选择。

那么，究竟该代码告诉你的是，el变量是undefined或null。有几个原因可能是：

你generateRandom(325)正在生成一个ID值是不存在的页面。
在页面完成加载和解析之前您正在调用document.getElementById(id.toString());，因此有些页面元素尚未出现。只有在页面加载到<body>的末尾或等待DOMContentLoaded事件触发后才能运行脚本。

仅供参考，如果你的问题是第二个，你可以读到这里pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it使用普通的JavaScript的各种解决方案。

如果你知道有时候generateRandom(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"); 
}

来源

2015-08-16 09:19:20 jfriend00

我正在寻找的所有元素实际上都是由JavaScript代码本身生成的，所以这些元素应该在特定代码运行时出现 – JavaFanatic

@JavaFanatic - 我毫不怀疑它们“应该”可以从其他代码中使用，但显然有些东西不对，或者'el'不会是'null'。也许你的其他代码有一个错误，它不会产生你认为它的所有东西，或者不会将它们全部插入到DOM中，所以它们可以通过'document.getElementById（）'找到。 – jfriend00

谢谢。 :)我意识到我的代码有一个错误，它涉及到错误计算。我改变了它，以便随机数的上限实际上由行*列设置，而不是固定的数字 – JavaFanatic

这种方法将收集与页面上可用的某一类项目的所有ID，现在，将返回ID中的一个随机。

您可以在此工作中看到它fiddle。检查控制台。

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]; 
}

来源

2015-08-16 09:37:25

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

回答

相关问题