Home/ Questions/Q 1049917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:41:28+00:00

I have the following JavaScript code: function createNotification(title, body, canDismiss, callback) { //create the

  • 0

I have the following JavaScript code:

function createNotification(title, body, canDismiss, callback)
{
    //create the container
    var nContainer = document.createElement("div");
    nContainer.setAttribute("id", "note"+title);
    nContainer.setAttribute("class","nContainer");
    nContainer.className = "nContainer";

    //create the title
    var nTitle = document.createElement("div");
    nTitle.setAttribute("class", "nTitle");
    nTitle.className = "nTitle";
    nTitle.innerHTML = title;

    //if canDismiss is true then add controls
    if (canDismiss)
    {
        var nDismiss = document.createElement("div");
        nDismiss.setAttribute("class", "nDismiss");
        nDismiss.className = "nDismiss";
        nDismiss.innerHTML = "[close]";
        nDismiss.onclick = function(){destroyNotification(title);callback();};
        nTitle.appendChild(nDismiss);

    }

    //append the title to the container
    nContainer.appendChild(nTitle);

    //create the body and append to container
    var nBody = document.createElement("div");
    nBody.setAttribute("class", "nBody");
    nBody.className = "nBody";
    nBody.innerHTML = body;
    nContainer.appendChild(nBody);

    document.body.appendChild(nContainer);

    //fade background
    fadeIt(title);
}

function destroyNotification(title)
{
    //get the specified notification
    var note = document.getElementById("note"+title);

    //remove the notification
    document.body.removeChild(note);

    //unfade the background
    unfadeIt(title)
}

function fadeIt(title)
{
    //create a partially opaque div and append it to the document
    var Fade = document.createElement("div");
    Fade.setAttribute("id", "fade"+title);
    Fade.setAttribute("class","fade");
    Fade.className = "fade";
    document.body.appendChild(Fade);
}

function unfadeIt(title)
{
    //get the specified fade element
    var Fade = document.getElementById("fade"+title);

    //remove the specified fade element
    document.body.removeChild(Fade);
}

I am getting a document.body error. Can anyone please help?

This is the html:

<html>
<head>
<title></title>
<script langauge="javascript" type="text/javascript" src="notification.js"> </script>
<link rel="stylesheet" type="text/css" href="notification.css" /> 
<script language="javascript" type="text/javascript">

createNotification("The Title", "Some sort of message for our body", true, function(){alert("A Callback");});


</script>
</head>
<body>
</body>
</html>

The error I got from firebug is:

document.body is null

[Break on this error] document.body.appendChild(nContainer);

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re executing the function createNotification before the page is even loaded. The body element doesn’t even exist when you call it.

    Call the function on the bottom of the page or add a load event [link].

    • 0