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

What is the best way to assign the "active" class to a navigation list item using JavaScript within Bootstrap 4?

Difficulty in altering the background of an input box

What are the implications of using eval() to interpret function parameters?

Creating a state in React may lead to an endless loop

"Exploring the incredible powers of Ionic2, Angular2, HTTP requests, and

Showing button based on a particular value

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

Unable to obtain return value in AngularJS controller or view

Decoding user input parameters within a vue module

What is the best way to adjust the screen to display the toggle element when it is opened?

Tips for updating checkbox values in the database to 1 when selected and 0 when deselected

SWR Worldwide Settings

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

Update the promise status to reflect any changes

What is the best way to include a class with Knockout JS?

Ways to showcase a variable's value in conjunction with text using .html() method

Tips for transferring information obtained from an API to my custom HTML page

Combine the click event and onkeydown event within a single function

What could be causing the submenus in my intricate menu component to lose focus when input is entered?

Guide on how to perform a POST request within a service worker?