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)
The second bloc of code is the html (index2.html)
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 ▾
</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>
