1

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:

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:

  1. Change href based on condition of URL on current page
  2. How to change href of <a> tag on button click through javascript
  3. Change part of link with part of current URL

Thanks for your help and your time!

CdyM
  • 11
  • 1

2 Answers2

0

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

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>
Robo Rick
  • 721
  • 6
  • 7
  • Hello Robo Rick. Thank you for your help! I tried your code. When I click on "Click here", the link of the current page change to the same but with an # at the end. Do you know why? – CdyM Jan 21 '22 at 20:54
  • Where are you trying this code? Are you trying it in codepen by chance? – Robo Rick Jan 21 '22 at 22:52
  • I tried it directly on mywebsite – CdyM Jan 24 '22 at 16:09
  • Oh, I see the issue @CdyM you're using location.pathname and checking for query params... location.pathname erases query params. So for the second two conditionals, you're going to need to change them to something like: `if (location.href.indexOf('/?utm_source=facebook') > -1) link.href="change you want"` – Robo Rick Jan 24 '22 at 19:03
  • Hey @Robo Rick! I tried it but that doesn't work. I can't find the solution for now... Thank you for your time! – CdyM Jan 28 '22 at 16:21