How can I insert links into HTML using javascript without the limitations of document.getElementById

Question

First, let me explain what I am trying to accomplish. I currently have 8 small websites that are identical except for a header image and the href links.

I am looking for a way to minimize maintenance and potential for human error each time these pages need updating.

For example, say I have 2 links that point to State specific login pages.

<a href="https://www.mypage.com/studentLogin?stateId=WA">Student Login</a>
<a href="https://www.mypage.com/teacherLogin?stateId=WA">Teacher Login</a>

In the past, I have been making copies of the updated HTML, then search and replace "stateId=WA" for "stateId=MI"

I started to see if I could make the URL using javascript and just append the 2 digit State ID using some function. That way I would only have to update the code, then copy it and replace the 2 digit state ID in one place, in one file.

I made progress by using the following external javascript file

function getParam() {
return 'WA';
}

function getLink() {
document.getElementById('studentLogin').href = 'https://www.mypage.com/studentLogin?stateId=' + getParam();
}

function getLink() {
document.getElementById('teacherLogin').href = 'https://www.mypage.com/teacherLogin?stateId=' + getParam();

and then using this in the HTML

<a href="#" onclick="getLink();" id="studentLogin">CLICK ME</a>

This worked, until I figured out that I can't have more than one element in the HTML with the same id. For example, one of the pages has a link to the Student Login in the Menu, and also has a link to the same place in the main content of the HTML, and only one of them would work.

So I suppose I could create several functions in the external javascript file each with their own ID, then update the HTML to call the new IDs, but I am in search of a better way.

All I really care about is minimizing maintenance, since I currently have 8 of these landing pages, but we could have more in the near future. Since there are only 4 distinct links off of these pages, it would be fine if I could figure out how to store the entire link in a variable, and just call that variable in the

<a> tag

Thank you for your help.

Answer 1

You can add classes to the relevant links, and then get the elements with document.getElementsByClassName("myclass")

<a href="#" class="myclass">test1</a><a href="#" class="myclass">test2</a>

And in JS:

var links = document.getElementsByClassName("myclass")

This would make links an array containing all the links over which you could iterate to apply your modifications.

Answer 2

Sounds like a job for a progressive enhancement.

I would suggest you add a attribute the html link; data-state-change. Then any future links you write you just add the attribute.

//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>

//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
   // eat the click
   e.preventDefault();

   //get the url
   var url = $(this).attr('href') + '?stateId=' + getParam();

   window.location = url;
);

You could do something similar with a css class also instead of an html data- attribute. Then it would be.

 $('body').on('click', '.someCssClass', function(e){
       // eat the click
       e.preventDefault();

       //get the url
       var url = $(this).attr('href') + '?stateId=' + getParam();

       window.location = url;
    );