0

I want to pass a function to href in my a tag link but no matter what I try it doesn't work. it either leads to a 404 page or is not even clickable. What am I doing wrong?

this is not clickable

<body>
<a id="specialLink" href="#" onClick="redirectToApp()">click me</a>
<script>
document.getElementById('specialLink').href = redirectToApp();
function redirectToApp () {
    return "http://www.google.com";
} 
</script>
</body>

this is not clickable

<body>
<a href="#" onClick="document.location.href=redirectToApp()">click me</a>
<script>
function redirectToApp () {
    return "http://www.google.com";
} 
</script>
</body>

this leads to a 404 page

<body>
<a href="javascript:document.location.href=redirectToApp();">click me</a>
<script>
function redirectToApp () {
    return "http://www.google.com";
} 
</script>
</body>

I should maybe also say that I am sending this HTML via email, from which the link should be opened and unless I just pass the URL as a string to href nothing is working

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
learncode
  • 127
  • 6
  • Your first example simply returns a string; it doesn't know it's supposed to navigate to it. Your second and third examples are attempting to navigate to a url that includes a string that happens to be the same name as your function. I'd use your first example, but instead of returning a url as a string, update the location.href like you do in example #2. – mykaf Aug 11 '23 at 13:45
  • 1
    First one is ok, just drop the `onClick` attribute. – Wiktor Zychla Aug 11 '23 at 13:47
  • Is there any particular reason for you to have a function returning the URL instead of performing the actual redirect? I mean, could you have instead `function redirectToApp() { window.location.href = 'http://www.google.com' }` and then `click me`? – secan Aug 11 '23 at 13:48
  • just add an `eventListener` and do the redirection from there instead of using a function that returns a link, kind of pointless – Chris G Aug 11 '23 at 13:51
  • @secan I forgot to add that but i have tried that as well and the link is also not clickable – learncode Aug 11 '23 at 13:54
  • 1
    I don't understand why you don't use it directly `click me`. – Benilson Aug 11 '23 at 14:12
  • i didnt post it as its not part of the question but i am sending an email with the html and link. inside my function I will determine if the link is opened on mobile or not mobile device and based on that i add the correct href (either to my app if mobile or website if not). thats why i cant just put a static string to href. – learncode Aug 11 '23 at 14:18
  • @learncode see [this question](https://stackoverflow.com/questions/3054315/is-javascript-supported-in-an-email-message). One solution is to leave the url static and in the application of the url, when opened, check if is necessary to redirect to the mobile device. – Benilson Aug 11 '23 at 15:03

2 Answers2

0

you can try this:

const anchor = document.getElementById('specialLink')
anchor.addEventListener((e) => {
    e.preventDefault()
    window.open("https://google.com");

})

and remove onClick on the anchor tag

cantdocpp
  • 350
  • 7
  • 18
0

With the first approach instead of using

<a id="specialLink" href="#" onClick="redirectToApp()">click me</a>

You can try out this:

<a id="specialLink" href="redirectToApp()" target="_blank">click me</a>

I have added a JS fiddle for you: https://jsfiddle.net/26ac0x7p/2/

Irin
  • 1,274
  • 1
  • 8
  • 9
  • Its very strange but when I do exactly as you propose i open 'http://redirecttoapp%28%29/' instead. I do send the html to an email and from this email a user would open the link. im wondering if that changes things – learncode Aug 11 '23 at 14:06
  • I believe it should work in every scenario. To test your specific scenario you can send a mail to yourself and check if anything changes. – Irin Aug 11 '23 at 14:12
  • yes I do that (sending email to myself) and the link is not google but 'redirecttoapp%28%29' – learncode Aug 11 '23 at 14:19
  • That's not how HTML works. It won't run `redirectToApp()` as JavaScript to replace the `href` attribute's contents. *Maybe* if you did `href="javascript:redirectToApp()"` it *might* work, but it's horribly insecure and a horrible way of doing things. Also, don't use JSFiddle; use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552). That way the code is runnable and here on this site. – Heretic Monkey Aug 11 '23 at 14:19