I have a JS menu builder that only works when included in the main html file and will not work from a external file. I have tried several authors variation of a JS auto menu and they all exhibit the same behavior.
I have tried all the suggestions found in the previous applicable answers such as putting the script file request in other locations such as just before the "div id=submenu" or at the end of the html file. The external file is in the same directory and is the proper name. I have meticulously checked for dumb mistakes. No luck!
Update
I got the script working after trying an unknown combination of things, but I do not know what caused the problem or exactly what I did to fix the problem. It appears to have been more than one problem.
For awhile, the script had additional problems without including .., then I notice it had changed and when I removed the .. I got full functionality.
I wish I could pass on for others what is was, I almost suspect a hidden character from the Internet cut and paste I did. However I had the same problem with similar functions by other authors, and I have never had cut & paste problems before. (I did not think to turn on the hidden char feature of Notepad++.) Thanks for the help!
There have been several questions about js not working from external files...
JS clock doesn't work
Why does this script not work in external js file?
javascript won't work in external file
none of these seem to address the problem I am having.
This seems to be an important part of JS for me to understand, I am not very familiar with JS so please dumb down the answer :)
Main HTML file
<!DOCTYPE HTML>
<head>
<title>Title</title>
</head>
<body style="margin: 50px auto; width:1000px;">
<div id="submenu">building menu...</div>
<h1>This is H1</h1>
<h2>This is H2 one</h2>
<h2>This is H2 two</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<!-- script include moved as suggested -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
External "main.js script file"
// script tags removed <script type="text/javascript">
// Original JavaScript code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
var buildMenu = function(targetId, headingTag) {
var target = document.getElementById(targetId);
var headings = document.getElementsByTagName(headingTag || "h2");
if(headings.length > 1) {
// construct an ordered list of links
var menuList = document.createElement("OL");
for(var i=0; i < headings.length; i++) {
var anchorName = "";
if(headings[i].id) {
anchorName = headings[i].id;
} else {
anchorName = "section_" + i;
headings[i].setAttribute("id", anchorName);
}
var headingText = headings[i].firstChild.nodeValue
headings[i].firstChild.nodeValue = (i+1) + ". " + headingText;
var menuLink = document.createElement("A");
menuLink.setAttribute("href", "#" + anchorName);
menuLink.appendChild(document.createTextNode(headingText));
var listItem = document.createElement("LI");
listItem.appendChild(menuLink);
menuList.appendChild(listItem);
}
// remove all nodes from inside target element
while(target.hasChildNodes()) target.removeChild(target.firstChild);
// insert our generated menu into the target element
target.appendChild(menuList);
} else {
// remove the target element from the DOM
target.parentNode.removeChild(target);
}
};
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
buildMenu("submenu", "h2");
}, false);
} else {
window.attachEvent("onload", function() {
buildMenu("submenu", "h2");
});
}
// removed </script>
`, because if you put at top of the file, the html elements are not in `DOM`.
– Roy Bogado Oct 16 '19 at 08:57locations and does not build the menu at the top.
– jwzumwalt Oct 16 '19 at 09:17` tag. (Or use `defer`, or in really modern browsers, you can use modules.)
– T.J. Crowder Oct 16 '19 at 09:20- it still does not work.
– jwzumwalt Oct 16 '19 at 09:22