javascript - 调用不同的 JavaScript 函数

标签 javascript html

抱歉,如果这是一个愚蠢的问题,我是 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>

感谢您帮助我。

P.S.我正在努力实现this ,但这次有两个链接。

最佳答案

问题是由于 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 - 调用不同的 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58738215/

相关文章:

html - 在 css 菜单上居中链接(水平)

html - HTML5 中的 chrome 应用程序 'webview' 替代品

javascript - asp.net,javascript,无法获取属性 getElementsByTagName 的值

javascript - 无滚动条的移动设备全屏广告图片

javascript - Jquery 不从表单字段获取值

php - JavaScript 启用按钮在 php 中不起作用

html - 流媒体视频更快。嵌入youtube还是使用html5和cloudfront?

javascript - 我的 javascript Canvas map 脚本和性能不佳

javascript - 附加到 JSON 符号?

javascript - 吞下目的地 : warn if 2 tasks try to write to the same destination