Question

我正在进行Javascript分配，将页面拆分为两个div元素，然后在左边添加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>

Answer 1

在“问题脚本”中的javascript运行之后，正文onload事件才会触发。

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

h1，p，#left和#right附加到DOM
脚本＃1运行，记录空的#left div和null lastElementChild。
正文onload事件触发和脚本＃2运行（generateFaces()函数）。此时，<img>标记将插入到DOM中。

修复是为了确保脚本＃1在＃2之后运行：

<body onload="handleLoad()">

和JS：

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

在控制台中，#left在脚本＃1运行时可能会显示图像。这只是控制台的一个怪癖;实际的日志记录是异步发生的，并且由于引用的变量在此期间发生了变化，实际记录的值与调用console.log()时的值不同。

您可以通过更改setTimeout函数调用的generateFaces()持续时间来查看此行为：

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);
}


var temp = document.getElementById("left");
console.log(temp); // displays <div> with its children <img>

var temp2 = temp.lastElementChild;
console.log(temp2); // returns null


setTimeout(generateFaces, 250) // play with this value

img {
    position: absolute
}

div {
    position: absolute;
    height: 500px;
    width: 500px
}

#right {
    border-left: solid black;
    left: 500px
}

<h1> Game </h1>
<p> Instructions </p>

<div id="right"></div>

<div id="left"> </div>

哦，请注意，您的generateFaces()函数当前在DOM中创建了多个具有相同ID的元素。你想要解决这个问题。

Answer 2

正文加载时会调用您的generateFaces（）函数。但是第二个脚本在窗口加载时运行。

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

你可以解决这个问题

<!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);

}

lastElementChild返回null

2 个答案: