Question

对不起，如果这是一个愚蠢的问题，我是JavaScript新手。我正在尝试创建链接，这些链接会根据您所在的页面自动更新。当我只有一个时，它工作得很好，但是显然，第一个链接也给了我与第一个相同的输出。这是我要实现的目标：

<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>

感谢您的帮助。

PS 。我正在尝试实现this，但这次有两个链接。

Answer 1

该问题归因于baseurl变量的范围。它被声明为全局变量，这意味着在第一个脚本标签中将其设置为初始值，然后在第二个脚本标签中将其设置为新值。这两个脚本都是在页面加载时执行的，因此几乎可以立即将baseurl设置为第二个值。

我建议您阅读有关变量作用域（https://developer.mozilla.org/en-US/docs/Glossary/Scope）和闭包（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures）的更多信息，以更好地理解问题。

要解决此问题，您可以为baseurl的第二个实例使用不同的变量名（可能类似于baseurl1），也可以将变量声明移到函数声明中以将其包装在内部这些关闭。

类似的事情应该起作用：

<!-- 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>

调用不同的JavaScript函数

1 个答案: