The final child element is null when using lastElementChild

Question

The final child element is null when using lastElementChild

For my current Javascript project, I am tackling the task of dividing the page into two separate div elements. The left div is populated with randomly positioned images, and then I utilized the .cloneNode() method to duplicate this on the right side, excluding the last image element.

Up to that point, everything was functioning correctly. However, I encountered an issue when trying to attach an event handler to the final element in the left div. Despite the presence of child nodes within the div as expected, the lastElementChild() method returned null. I have included the code snippet below along with a comment pointing out the problematic section. Any assistance would be greatly appreciated!

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

<script>

<!-- All previous sections are working flawlessly -->

    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>

    <!-- Issue arises in this portion of the script -->

    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>

javascript

Answer 1

Answer №1

The onload event of the body will only trigger after the execution of the JavaScript in your 'problem script'.

The sequence of events is as follows:

The elements h1, p, #left, and #right are added to the DOM
Script #1 executes, logging the empty #left div and the lastElementChild as null.
The body's onload event triggers, and script #2 runs (the generateFaces() function), inserting the <img> tags into the DOM.

To resolve this issue, ensure that script #1 runs after script #2:

<body onload="handleLoad()">

and here is the corresponding JS code:

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

It might seem like the #left already has images when script #1 runs due to the asynchronous nature of the console log. Consequently, the value logged may be different than the actual content at the time of calling console.log().

You can observe this behavior by adjusting the setTimeout duration for the generateFaces() function call.

Additionally, note that the generateFaces() function creates multiple elements with the same id in the DOM, which should be rectified.

Answer 2

The onload event of the body will only trigger after the execution of the JavaScript in your 'problem script'.

The sequence of events is as follows:

The elements h1, p, #left, and #right are added to the DOM
Script #1 executes, logging the empty #left div and the lastElementChild as null.
The body's onload event triggers, and script #2 runs (the generateFaces() function), inserting the <img> tags into the DOM.

To resolve this issue, ensure that script #1 runs after script #2:

<body onload="handleLoad()">

and here is the corresponding JS code:

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

It might seem like the #left already has images when script #1 runs due to the asynchronous nature of the console log. Consequently, the value logged may be different than the actual content at the time of calling console.log().

You can observe this behavior by adjusting the setTimeout duration for the generateFaces() function call.

Additionally, note that the generateFaces() function creates multiple elements with the same id in the DOM, which should be rectified.

Answer 3

Answer №2

Your generateFaces() function is triggered when the body finishes loading. However, your second script will only run once the window has completely loaded.

This means that when the second script executes, there is no temp.lastElementChild available, resulting in a null value.

You can resolve this issue by following this code snippet:

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

}

Answer 4

Your generateFaces() function is triggered when the body finishes loading. However, your second script will only run once the window has completely loaded.

This means that when the second script executes, there is no temp.lastElementChild available, resulting in a null value.

You can resolve this issue by following this code snippet:

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

}

The final child element is null when using lastElementChild

Answer №1

Answer №2

Similar questions

Issue with passing parameter values in MVC Html.ActionLink

React state not being updated by setState method

Tips on verifying the count with sequelize and generating a Boolean outcome if the count is greater than zero

Having issues retrieving a JSON array in PHP with the json_decode function

Having trouble with passing the callback for nested mysql queries in Async.waterfall?

Guide on how to streamline JSON output from aggregation result

403 Malicious Path Middleware Error in Express.js

What is the best way to incorporate the .top offset into a div's height calculation?

Initiating a conversation from deep within a conversation using JQuery Mobile

Angular JavaScript Object Notation structure

What is the best way to encapsulate a function that uses `this.item.findElement()` from Selenium in a separate file?

Leveraging Javascript to generate universal HTML content for various Javascript files

Can you provide me with the URL for the jQuery post function?

Retrieving information from a JSON source to populate a data table

Guide to smoothly scroll to a specific Label using GSAP's scrollTrigger and scrubbing within a Timeline

Creating a flexible parent tag for grouping child elements using Angular 2

Issue with Ionic displaying data from AngularJS $http.get request

Incorporating a dynamic URL within a script tag with AngularJs

Can VueJS 1 and 2 be integrated within the same package.json configuration?

Switch the website title as soon as the user looks away from the tab