Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript What am I doing wrong coding a template

jgnordby

New Coder
I am creating a new web site for my training classes. I have a menu that is repeated on every page. I do not to have to maintain 41 pages of menu code. I want to have the menu code in one place and call it from the main pages. Searching around the internet I came across the concept of a template using JavaScript, so this is currently what I am trying to do.

The code below is my attempt to create a template that can be called on every page. The code between the <header> </header> is the first menu Item code to be dispalyed. There are several things in the code that are defined in the .css file. I have not included it here as that code has been thoroughly tested. What is listed below is the first menu element I was displayed.

My problem is that this code does not work, and I am not sure why. Can you help, please.
I am moderately well versed in html, but I am a total newbie when it comes to JavaScript

My JavaScript file is called test.js.
My html file is called index2.html
My css file is called layoutjs.css

The first code below is the javaScript (test.js)

JavaScript:
Class MyHeader extends HTMLElement{
    connectedCallback() {
        this.innerHTML = '
            <link rel="stylesheet" href="css/layoutjs.css">
            <header>
            <div class="wrapper">
              <div class="box col2">
                  <div class="dropdown">
                       <div class="dropbtn">INDEX &#9662;
                    </div>
                    <div class="dropdown-content">
                      <a href="Index.html">Home</a>
                      <a href="About_Us.html">About Us</a>
                       <a href="CourseCalendar.html">Course Calendar</a>
                       <a href="links.html">Useful Links</a>
                        <a href="Blog.html">Blog</a>
                    </div>
                </div>
              </div>
             </div>
        </header>
        '
    }
}

customElements.define('my-header', MyHeader)


The second bloc of code is the html (index2.html)

HTML:
<!DOCTYPE html>
<meta charset="utf-8"?
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>

<script type=module src=test.js></script>

<my-header></my-header>
 
Use PHP for this not JS. Write your code for the menu and save it as a php file then call the file like this:


Code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Web Site</title>
<!-- <link rel="stylesheet" href="style.css" /> -->
</head>
<body>
    <?php include 'menu.php';?>
    include()
</body>
</html>
Remember to save the main pages as php and not html.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom