change href on a button according to the pathname of the current page with javascript

Question

change href on a button according to the pathname of the current page with javascript

773 Views Asked by CdyM At 21 January 2022 at 20:03

To avoid duplicating web pages, I am looking for a way to change the link in a button according to the relative link of the page.

Let's imagine that we are on the site https://mywebsite.com/ and we want to send users to https://othersite.com/ (These websites are given as examples

Here is what I would like to do:

If the current link is https://mywebsite.com/ then the button should offer this link https//othersite.com/
If the current link is https://mywebsite.com/?utm_source=facebook then the same button must propose this link https://othersite.com/?value=facebook
If the current link is https://mywebsite.com/?utm_source=twitter then the same button must propose this link https://othersite.com/?value=twitter
etc

In short, I'm looking for a way to vary the link of a button in an href attribute depending on the current link of the page.

I'm just starting in javascript. I'm far from understanding all the subtleties of this language.

Here is what I tried but it (obviously) doesn't work:

<html>
  <head></head>
  <body>
    <a href="javascript:location.assign" >Click here</a> 
    <script>
      if (location.pathname === "/") {
location.assign("https//othersite.com/");
    }
      if (location.pathname === "/?utm_source=facebook") {
location.assign("https://othersite.com/?value=facebook");
    }
      if (location.pathname === "/?utm_source=twitter") {
location.assign("https://othersite.com/?value=twitter");
    }
    </script>
  </body>
</html>

Here are also resources that I think are useful but I can't apply to my problem:

Thanks for your help and your time!

Original Q&A

There are 2 best solutions below

**mplungjan** · Answer 1 · 2022-01-21T20:19:13.863000

You do not access the link with your code

Here is code that will work better. I use a lookup table

Note the code below is not actually allowed to open the link here at SO but will work on your server

const locations = {
  "/js": "https://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work",
  "/": "https//othersite.com/",
  "/?utm_source=facebook": "https://othersite.com/?value=facebook",
  "/?utm_source=twitter": "https://othersite.com/?value=twitter"
}

window.addEventListener("DOMContentLoaded", function() { // elements are available
  document.getElementById("link").addEventListener("click", function(e) {
    console.log(location.pathname,locations[location.pathname])
    const loc = locations[location.pathname]
    if (loc) this.href = loc;
  })
})

<a href="#" id="link" target="_blank">Click here</a>

**Robo Rick** · Answer 2 · 2022-01-21T20:24:17.663000

Use getElementById and set the href instead... The Solution below works.

<html>
      <head></head>
      <body>
        <a href="#" id="link">Click here</a> 
        <script>
          var link = document.getElementById('link')
          
          if (location.pathname === "/") {
    link.href = "https//othersite.com/";
     }
          if (location.pathname === "/?utm_source=facebook") {
    link.href = "https://othersite.com/?value=facebook";
        }
          if (location.pathname === "/?utm_source=twitter") {
    link.href = "https://othersite.com/?value=twitter";
        }
        </script>
      </body>
    </html>

change href on a button according to the pathname of the current page with javascript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HREF

Related Questions in RELATIVE-URL

Trending Questions

Popular # Hahtags

Popular Questions