How to write the url links for the main menu of my site with javascript (instead of the html)

JavaScript
1

Hello. I was hoping to get help in writing the link code for my main (navigation) menu in a .js file instead of in the HTML files.

For context, the site will launch in an infant stage so already some of the links are temporary (for example our Sign Up link will go to Google Forms until we are ready to create our own for the site) and when it grows we would like to be able to change the link(s) from one js file as opposed to changing it in every HTML file made.

It is 6 links, each in a ‘div class’ for hover and decorative purposes. All six of these divs are in a flex div container so they could be justified by ‘space-between’. Here is the HTML code:

  <div class="item mnu">

      <div class="ind"><p>Home</p></div>

    <div class="srs"><p>Series</p></div> 

    <div class="-sgu"><p>Sign Up</p></div>

    <div class="abt"><p>About Us</p></div>

    <div class="adv"><p>Advertise</p></div>

    <div class="lgl"><p>Legal</p></div>

  </div>  <!-- item mnu Closed  --->

My goal is to 1. keep the HTML page with as little css and js code as possible, I’d rather it be in respective files, 2. make the div the clickable link as opposed to the word in the div, 3. hopefully use a single js file to change any of the links if needed so that any page on the site immediately has the changes when the js file is uploaded, 4. not lose the formatting of menu.

It would be really cool if I could change the names of the links from the js file too if needed, but I will settle with the links if that’s what I can get.

I’ve watch and tried a bunch of turtorials but for whatever reason when I click the div it does not redirect. Here is a snippet of the header section of a page:

image
image1453×865 222 KB

Any help would be greatly appreciated.

2

Hi @itsMonty

First off, don’t use the div element as the parent container.

This looks like the links are for navigation, so it is appropriate to use the semantic nav element.

I don’t think you need to nest a paragraph element in the divider element containing the link text.

The html code you supplied doesn’t contain any links.

Please post your JavaScript file if you need help debugging the failing click action.

Happy coding

3

Hello and thanks! I have now changed the div to nav on all the pages, so glad it was only 6 of them right now, and I removed the paragraph element.

For the linking issue: It turns out that my link to the javascript was broken. I copied and pasted all the java stuff for the sake of no errors, but in the end, on the html pages I had to tell it to find the javascript in the js folder (src=js/menu.js instead of scr=menu.js as pasted). So much for “the sake of errors”.

I must have looked at that line of code a hundred times and just couldn’t see it, smh. Such a silly, it added hours of work.

Again thank you for the corrections, I am still a quite unaware of many aspects of coding so I am grateful for the tip. I will definitely apply it to my other works.

cheers