Fatal编程技术网
  • javascript/
  • Javascript lastElementChild返回null

Javascript lastElementChild返回null

javascript

Javascript lastElementChild返回null,javascript,Javascript,我正在处理一个Javascript赋值，该赋值将页面拆分为两个div元素，然后在左侧添加随机放置的图像，然后使用.cloneNode（）在右侧复制，减去最后一个子图像 这部分工作正常，但是我应该在左div的最后一个元素中添加一个事件处理程序，但是当我尝试这样做时，lastElementChild（）方法返回null，即使div具有预期的子节点。下面是代码，我已经说明了问题所在。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> &

我正在处理一个Javascript赋值，该赋值将页面拆分为两个div元素，然后在左侧添加随机放置的图像，然后使用
.cloneNode（）
在右侧复制，减去最后一个子图像

这部分工作正常，但是我应该在左div的最后一个元素中添加一个事件处理程序，但是当我尝试这样做时，
lastElementChild（）
方法返回null，即使div具有预期的子节点。下面是代码，我已经说明了问题所在。任何帮助都将不胜感激

<!DOCTYPE html>
<html>
<head>
<style>
    img {position: absolute}
    div {position: absolute; height: 500px; width: 500px}
    #right {border-left: solid black; left: 500px}
</style>

<script>

<!-- everything here works fine -->

    function generateFaces(){

        var theLeftSide = document.getElementById("left");

        var numberFaces = 5;

        for (i = 0; i < numberFaces; i++){
            var random_x = Math.random()*400;
            var random_y = Math.random()*400;
            var image = document.createElement("img")
            image.src = "smile.png";
            image.setAttribute("style","top: " + random_y + "px;" + "left: " + random_x + "px;");
            theLeftSide.appendChild(image);
        }

        var theRightSide = document.getElementById("right");

        leftSideImages = theLeftSide.cloneNode(true);
        theRightSide.appendChild(leftSideImages);
        theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild);
    }


</script>

</head>
<body onload = "generateFaces()">
    <h1> Game </h1>
    <p> Instructions </p>

    <div id = "right"></div>

    <div id = "left"> </div>

    <script>

    <!-- problem script here -->

    var temp = document.getElementById("left");
    console.log(temp); // displays <div> with its children <img>

    var temp2 = temp.lastElementChild;
    console.log(temp2); // returns null

    </script>

</body>

</html>


img{位置：绝对}
div{位置：绝对；高度：500px；宽度：500px}
#右{边框左：纯黑色；左：500px}
函数生成器（）{
var theLeftSide=document.getElementById（“左”）；
var numberFaces=5；
对于（i=0；i
var temp=document.getElementById（“左”）；
控制台日志（临时）；//显示及其子项
var temp2=temp.lastElementChild；
console.log（temp2）；//返回空值
直到“问题脚本”中的javascript运行之后，主体的
onload
事件才会触发

这里的执行顺序基本上是：

  • h1
    ，
    p
    ，
    #左
    ，和
    #右
    被附加到DOM中

  • 脚本#1运行，记录空的
    #left
    div和
    null
    lastElementChild

  • body
    onload
    事件激发并运行脚本#2（
    generateFaces（）
    函数）。此时，
    标记被插入到DOM中

修复方法是确保脚本#1在#2之后运行：

img{
位置：绝对位置
}
div{
位置：绝对位置；
高度：500px；
宽度：500px
}
#对{
左边框：纯黑色；
左：500px
}
游戏
指示
加载正文时将调用generateFaces（）函数。 但第二个脚本在加载窗口时运行

因此，当第二个脚本运行时，没有temp.lastElementChild，您将得到null

你可以这样解决

<body onload="handleLoad()">


img{位置：绝对，高度：30px；宽度：30px；}
div{位置：绝对；高度：500px；宽度：500px}
#右{边框左：纯黑色；左：500px}
游戏
指示

函数生成器（）
{
console.log（'y'）；
var theLeftSide=document.getElementById（“左”）；
var numberFaces=5；
对于（i=0；i


函数加载（）{
var temp=document.getElementById（“左”）；
控制台日志（temp）；
var temp2=temp.lastElementChild；
console.log（temp2）；
} 

generateFaces（）
在您的
console.log（temp2）
之后被调用。当您登录时，
#left
仍然是一个空的
div
function handleLoad() {
    generateFaces()
    logStuff()
}

function logStuff() {
    var temp = document.getElementById("left");
    console.log(temp); // displays <div> with its children <img>

    var temp2 = temp.lastElementChild;
    console.log(temp2); // logs <img>
}

<!DOCTYPE html>
<html> 
<head>
<style>
img {position: absolute, height: 30px; width: 30px;}
div {position: absolute; height: 500px; width: 500px}
#right {border-left: solid black; left: 500px}
</style>
</head>
<body onload = "generateFaces()">
<h1> Game </h1>
<p> Instructions </p>

<div id = "right"></div>

<div id = "left"> </div>
<script>


function generateFaces()
{
    console.log('y');
    var theLeftSide = document.getElementById("left");

    var numberFaces = 5;

    for (i = 0; i < numberFaces; i++){
        var random_x = Math.random()*400;
        var random_y = Math.random()*400;
        var image = document.createElement("img")
        image.src = "smile.png";
        image.setAttribute("style","top: " + random_y + "px;" + "left: " + random_x + "px;");
        theLeftSide.appendChild(image);
    }

    var theRightSide = document.getElementById("right");

    leftSideImages = theLeftSide.cloneNode(true);
    theRightSide.appendChild(leftSideImages);

    theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild);

    loaded();

}

<script>

 function loaded() {


var temp = document.getElementById("left");
console.log(temp); 

var temp2 = temp.lastElementChild;
console.log(temp2);