Calling different JavaScript functions

Question

Sorry, if this is a stupid question, I'm new to JavaScript. I'm trying to create links which will automatically update according to the page you're on. It worked fine when I just had one of them, but apparently, the first link also gives me the same output as the first one. Here's what I'm trying to achieve:

<html>
<head>
<!-- QR API generator call -->
  <script>
    baseurl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="
    function buildQR(item)
    {
        item.href=baseurl+window.location.href;
        return true;
    }
    </script>
  <!-- Sharing append link via JavaScript -->
  <script>
  baseurl="whatsapp://send?text="
  function buildURL(item)
  {
      item.href=baseurl+window.location.href;
      return true;
  }
  </script>
</head>
<body>
<a onclick="return buildQR(this)" href="">Generate QR</a>
<a onclick="return buildURL(this)" href="" data-action="share/whatsapp/share">Share on WhatsApp</a>
</body>
</html>

Thanks for helping me out.

P.S. I'm trying to achieve this, but with two links this time.

Can you give some examples of the desired output? For now, I didn't understand what you are trying to achieve here — Calvin Nunes
– Calvin Nunes, Commented Nov 6, 2019 at 20:46
if you're new to javascript, it's worth reading through a few modern tutorials, because the code you're showing might have been okay a decade ago, but is kind of bad as modern HTML/JS. Don't use inline js like onclick, get your elements and then addEventListener whatever it needs - also, unless it's a true link, don't use <a>, use <button> because that's what it is, and then use CSS to style that however it needs to look. Also, say what kind of variable you're using. var? let? const? etc. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 6, 2019 at 20:48
@CalvinNunes When someone clicks on the link to Generate QR, it should append the URL of the page the user's on to "api.qrserver.com/v1/create-qr-code/?size=150x150&data=". Similarly, when someone clicks on the link to Share on WhatsApp, it should do it for "whatsapp://send?text=" — Berry Holmes
– Berry Holmes, Commented Nov 6, 2019 at 20:48
@Mike'Pomax'Kamermans is it because I'm using <a> to call JavaScript? Because I've heard it's frowned upon. — Berry Holmes
– Berry Holmes, Commented Nov 6, 2019 at 20:50
It's because of so many things. You also don't have a <!doctype html> at the top to indicate this is true HTML5, you're missing a charset meta and a title, all that JS should be in its own file so you can load it with <script src="..." defer></script>, etc. -- it just looks like the kind of HTML/JS that highly outdated tutorials/books would teach you to use. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 6, 2019 at 20:52

Eric Gibby · Accepted Answer · 2019-11-06 21:41:47Z

The problem is due to the scope of the baseurl variable. It's being declared as a global variable, which means in your first script tag it gets set with the initial value, then in the second script tag it gets set to a new value. Both of those scripts are executed when the page loads, so it's pretty much immediately setting baseurl equal to the second value.

I would recommend reading more about variable scoping (https://developer.mozilla.org/en-US/docs/Glossary/Scope) and closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) to better understand the issue.

To fix it, you can either use a different variable name for the second instance of baseurl (something like baseurl1, maybe), or move the variable declarations inside the function declarations to wrap them inside those closures.

Something like this should work:

<!-- QR API generator call -->
<script>    
    function buildQR(item) {
        var baseurl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";

        item.href=baseurl+window.location.href;
        return true;
    }
</script>
<!-- Sharing append link via JavaScript -->
<script>
    function buildURL(item) {
        var baseurl="whatsapp://send?text=";

        item.href=baseurl+window.location.href;
        return true;
    }
</script>

Collectives™ on Stack Overflow

Calling different JavaScript functions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related