Change href Using Javascript

Change href Using Javascript

Sometimes you need to change the href on a page and you need to do it without actually editing the code that is on the page.  Luckily there are ways to accomplish this task.  In this post I will show you how to Change href Using Javascript.

For example, let’s say you had the following line of code:

<a class="example" href="testing.com">This Is A Test Link</a>

Which would output:
This Is A Test Link
But you wanted to change the href link in it to go to newlink.com like this:

<a class="example" href="newlink.com">This Is A Test Link</a>

Using Javascript we can target the class that is on the a tag and change the href with the following:

<script>
function myFunction() {
    var linkChanger = document.getElementsByClassName("example"),
        i = linkChanger.length;

    while(i--){
        linkChanger[i].href = "newlink.com";
}
}
window.onload = myFunction;
</script>

Keep in mind that this method will change ALL the href’s on the page with class “example”
The Breakdown Of The Javascript Above
First we have a function. The function can be called anything you want it to be. For our example we call it myFunction.

function myFunction() {
    //FUNCTION CODE GOES HERE
}

The next part we will declare two variables:
The first variable uses document.getElementsByClassName. What this does is returns an array of objects with a specific class. For our example we are setting the variable “linkChanger” to be an array of every time an object with the class “example” appears in our page.

Click here to learn more about getElementsByClassName.

The second variable uses .length which will determine how many times an object appears using in our array. For our example we are setting the variable “i” to equal the length of our first variable “linkChanger”. In other words i equals the number of times the class “example” appears in our page.

var linkChanger = document.getElementsByClassName("example"),
     i = linkChanger.length;

Next we are going to add a while loop to go through every instance that the class “example” shows up and change the href to equal newlink.com. For our example we have a variable “i” set to equal the number of times the class “example” show up. In our while loop we our going to have it start with the number that our variable “i” is equal to and subtract 1 every time the code inside the loop runs until we get to 0 and then stop the loop.

while(i--){
    //CODE TO RUN WITH EVERY LOOP
}

Inside our while loop is where we put our code to change the href using Javascript. The first part of this code is linkChanger[i] which means for each loop it is going to set “i” to a number starting with the number of times the class “example” appears in our code. If for example the class “example” appeared in our code 10 times then “i” would start out being equal to 9 (remember that the code starts counting with 0). This means that when our while loops executes the code for the first time it is going to start by changing the href of the last a tag with class “example” in the page.
The next bit of code we have after linkChanger[i] is .href = “newlink.com so when we add .href = “newlink.com to linkChanger[i] it will change the link of the object on the page that has class “example” on it and is corresponding to whatever number “i” is equal to in the loop. This means that when “i” is equal to 0 it will change the very first object on the page that has the class “example”

    while(i--){
        linkChanger[i].href = "newlink.com";
}

The final piece to change href using Javascript is to make the Javascript run. There are many ways to do this but for our example we are going to have the Javascript run when the page is finished loading using window.onload. The window.onload call just says when the window is finished loading then run our function.

window.onload = myFunction;

Here is our example to Change href Using Javascript again put all together:

<script type="text/javascript">
function myFunction() {
    var linkChanger = document.getElementsByClassName("example"),
        i = linkChanger.length;

    while(i--){
        linkChanger[i].href = "newlink.com";
}
}
window.onload = myFunction;
</script>

Change href Using Javascript

Now that you have learn how to change href using Javascript click here to learn how to change href using jQuery. To change href using jQuery is actually easier than to change href using Javascript.

Leave a Comment

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

*
*