Solution 1 :

Your old Javascript file has 1 serious problem – you are using document.write() which is a big no-no in current web practice: it must be run before the document is ready – otherwise, it will overwrite all the other content – and even if used right it causes a major slowdown as the browser has to reinterpret the entire document multiple times.

You probably want to convert your old Javascript code and the new HTML code to DOM editing using the DOM API.

It might looks something like this (this is not a full example, I’m making a very simplified sidebar):

var navlinks = [
  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
];

function createSidebar(/* DOMElement */ container) {
  var nav = document.createElement("nav");
  nav.setAttribute("id", "sidebar");
  nav.append(createSidebarHeader(), /* <div class="sidebar-header">...</div> */
             createSidebarMenu()); /* <ul>...</ul> */
  container.append(nav);
}

function createSidebarMenu() {
  var list = document.createElement("ul");
  list.setAttribute("class", "collapse list-unstyled");
  list.setAttribute("id", "homeSubmenu");
  for (var link of navlinks) {
    var li = list.appendChild(document.createElement("li"));
    var a = li.appendChild(document.createElement("a"));
    a.setAttribute("href", "#");
    a.append(link);
  }
  return list;
}

Then from your main document, after loading the Javascript file, you can have a “container” for your sidebar (let’s say – a <div id="sidebar-holder">) and call createSidebar(document.getElementById("sidebar-holder")).

There are various Javascript frameworks that will help with the tedious job of creating HTML elements using the DOM API – Google for them or sth.

Problem :

HTML

<nav id="sidebar">
  <div class="sidebar-header">
          <img src="Files/Logo.png" width="150px" height="150px">
          <h3>Name</h3>
  </div>

  <ul class="list-unstyled components">
      <p>Dummy Heading</p>

      <li class="active">
         <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
         <ul class="collapse list-unstyled" id="homeSubmenu">
           <li>
              <a href="#">Home 1</a>
           </li>
           <li>
              <a href="#">Home 2</a>
           </li>
           <li>
              <a href="#">Home 3</a>
           </li>
          </ul>
      </li>

  </ul>

</nav>

JS File

var myArray = [
  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
}

document.write(

'<button onclick="myAccFunc(1)"> Heading </button> '+

 ' <a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Website 1 </a> '+
 ' <a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Website 2 </a> '+
 ' <a href="'+myArray[2][0]+'" class="'+myArray[2][1]+'" > Website 3 </a> '+
 ' <a href="'+myArray[3][0]+'" class="'+myArray[3][1]+'" > Website 4 </a> '+
 ' <a href="'+myArray[4][0]+'" class="'+myArray[4][1]+'" > Website 5 </a> '+
'</div>'

);

The JS File was my SideBar menu and i had to move some code around to make the Site Mobile Friendly. Now my present code is the HTML Code. How do i create a JS File for that Nav Menu just like the one i had before because i can’t put Sidenav code in HTML because i have a lot of menus?
I just want to remove nav code from HTML and put it in a JS File with an array of sites and include that JS File in my HTML Page

EDIT

<nav id="sidebar">
  <script src="NAV.js">
      createSidebar(document.getElementById("sidebar"))
  </script>
</nav>

NAV

var myArray = [

  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
];


function createSidebar(/* DOMElement */ container) {
  var nav = document.createElement("nav");
  nav.setAttribute("id", "sidebar");
  nav.append(createSidebarHeader(), /* <div class="sidebar-header">... 
</div> */
createSidebarMenu()); /* <ul>...</ul> */
container.append(nav);
}

function createSidebarMenu() {
  var list = document.createElement("ul");
  list.setAttribute("class", "collapse list-unstyled");
  list.setAttribute("id", "homeSubmenu");
  for (var link of navlinks) {
    var li = list.appendChild(document.createElement("li"));
    var a = li.appendChild(document.createElement("a"));
    a.setAttribute("href", "#");
    a.append(link);
  }
  return list;
}

Comments

Comment posted by Angshu31

Are you using

Comment posted by Akash R

I used to use that. Now i dont. Please help me put the nav into a JS file and Include it in my Page @LearnforFun

Comment posted by Akash R

is the updated question better? @LearnforFun

Comment posted by Angshu31

It is easier to understand now, and is that div meant to be unopened in the JS file?

Comment posted by Angshu31

More importantly, Am i right in saying that: you want to put all the links in the JS file and render it in HTML from there.

Comment posted by Akash R

i followed your answer but the Side bar is not showing. When i replace the

By

Leave a Reply

Your email address will not be published. Required fields are marked *