Modify HTML with JavaScript on page load

I'm in the earliest stages of building a website. I'd like to have a consistent navigation bar across all pages on my website, so my plan is to create a navigation bar in its own HTML file and then load it into a div made for it in each page.

At this stage, though, I can't even seem to get my JavaScript to run. Initially I tried just having the script on its own. With this, neither the modified innerHTML nor the pop-up for testing appear.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="nav-bar">The navigation bar has failed to load.</div>
        <script>
            document.getElementByID("nav-bar").innerHTML="test";
            alert("Hello")
        </script>
        <h1>Welcome</h1>
        <p>This site is under construction.</p>
    </body>
</html>

I also tried using an onload event, but still nothing happened.

function load-nav-bar() {
  document.getElementByID("nav-bar").innerHTML = "test";
  console.log("Hello")
}

<div id="nav-bar" onload="load-nav-bar()">The navigation bar has failed to load.</div>

<h1>Welcome</h1>
<p>This site is under construction.</p>

At this stage, though, I can't even seem to get my JavaScript to run. Initially I tried just having the script on its own. With this, neither the modified innerHTML nor the pop-up for testing appear.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="nav-bar">The navigation bar has failed to load.</div>
        <script>
            document.getElementByID("nav-bar").innerHTML="test";
            alert("Hello")
        </script>
        <h1>Welcome</h1>
        <p>This site is under construction.</p>
    </body>
</html>

I also tried using an onload event, but still nothing happened.

function load-nav-bar() {
  document.getElementByID("nav-bar").innerHTML = "test";
  console.log("Hello")
}

<div id="nav-bar" onload="load-nav-bar()">The navigation bar has failed to load.</div>

<h1>Welcome</h1>
<p>This site is under construction.</p>

I assume the problem is something with how I'm using JavaScript, but it's been the better part of a decade since I last used it and if there's something I'm doing wrong, unfortunately I don't remember and haven't been able to figure it out. Can anyone help explain why the JavaScript won't run?

Share Improve this question edited Mar 28 at 16:03 isherwood 61.2k16 gold badges121 silver badges170 bronze badges asked Mar 28 at 15:57 BGreen 4824 silver badges20 bronze badges

Are there any errors in your dev console? – mykaf Commented Mar 28 at 15:58
1 Hyphens aren't allowed in function names. Based on that and the issues mentioned by 0stone0, you really need to get yourself a good editor which will point these things out. Please revise the demo above to show the problem. – isherwood Commented Mar 28 at 16:04
2 If you're not familiar with the development/debugging tools included in modern browsers, now is a good time to start looking into them. The browser console is where error messages are shown, the script debugger can help you step through code to observe its behaviors, etc. In the code snippet above, you can see in the built-in console that your code is indeed producing a syntax error. No need to assume what the problem is, the browser can tell you. – David Commented Mar 28 at 16:40

Add a comment |

3 Answers 3

Sorted by: Reset to default 3

There is no onload event for divs
Use the window.onload function: How do I call a JavaScript function on page load?
It's getElementById, not getElementByID
Don't use -s in function names:
What characters are valid for JavaScript variable names?

document.addEventListener("DOMContentLoaded", loadnavbar);

function loadnavbar(){
    document.getElementById("nav-bar").innerHTML="test";
    alert("Hello")
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="nav-bar">The navigation bar has failed to load.</div>
        <h1>Welcome</h1>
        <p>This site is under construction.</p>
    </body>
</html>

I would recommend using <template> blocks in html. This is a guide I found helpful.

Include this in your javascript file:

const navbar__template = document.createElement('template');

navbar__template.innerHTML = `
    <h1>Hello, world</h1>
`;

const navbar__element = document.getElementById('navbar');
navbar__element.appendChild(navbar__template.content);

    <!-- Header -->
    <div id="navbar"><!-- NOTE: To find the navbar code, please look in "navbar.js"--></div>
    <script src="js/navbar.js"></script>
    <!-- End of Header-->

And then you can add the above html to all of your pages.

The reason is because you used document.getElementByID The "D" is not supposed to be capitalized. Here is the corrected code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="nav-bar">The navigation bar has failed to load.</div>
        <script>
            document.getElementById("nav-bar").innerHTML="test";
            alert("Hello")
        </script>
        <h1>Welcome</h1>
        <p>This site is under construction.</p>
    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Modify HTML with JavaScript on page load - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)