CODEWITHSUNDEEP
javascriptjqueryhtmlfunctiongetelementbyid
ryan_webdev
ryan_webdev

Reputation: 1

getElementById TypeError: "cannot set property 'innerHTML' of null

I'm a beginner HTML learner and I was self-taught on the way through. This is the first website I have ever done by scratch (using HTML and CSS and JS). I looked around on this site at the other questions and answers regarding this, but I'm running into an issue the other answers don't resolve. Many of the answers suggest that a "window.onload = function() { JavaScript }" will resolve the issue, but I have more than one possible function in a given page. I'm using innerHTML to load body content, while the background and navigation is consistent in the webpage.

I have four buttons with four different functions: "Home Page, About, Videos, Research and Development"; with respective functions: "load_home(), load_about(), load_media(), and load_research()."

I have it so it looks like this:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Script\jquery-ui-1.11.2.custom\jquery-ui.theme.css">
<link language="JavaScript"type="text/css" rel="stylesheet" href="Script\jquery-ui-1.11.2.custom\jquery-ui.css"></link>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\external\jquery\jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript">
    $(function() {
        $( "input[type=submit], a, button" )
        .button()
        .click(function( event ) {
            event.preventDefault();
        });
    });
</script>
</head>
<body>
<div class="start"> <!--start refers to the CSS scope I added to the jQuery UI I have added for the buttons in my navigation-->
<nav>
<button onclick="load_home()" class="">Home Page</button>
<button onclick="load_about()" class="">About </button>
<button onclick="load_media()" class="">Videos</button>
<button onclick="load_research()" class="">Research and Development</button>
</nav>
</div>
</body>
<script type="text/javascript"> 
    function load_home() {
        document.getElementById("content1").innerHTML='<object type="text/html" data="Home.html"></object>';
            } 
    function load_about() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="About Golding Lights.html"></object>';
            } 
    function load_media() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="Media.html"></object>';
            } 
    function load_research() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="Research and Development.html"></object>';
            } 
</script>
</html>

I've used this function before in another website I was going to develop, and it worked just fine. Hopefully there are some answers that can help me. Thanks.

Upvotes: 0

Views: 1209

Answers (1)

NickSlash
NickSlash

Reputation: 5077

As commented, you don't appear to have any (many) Id's in your HTML.

Body is not an Id, its a tag name. As there should only be one body element in your document its possible to access it using document.getElementsByTagName('body')[0] (the function returns a collection/array of objects, and the [0] returns the first element)

You could also add an Id to the element <body id="myBody"> which would allow you to use document.getElementById('myBody')

Upvotes: 1

Related Questions