QRcode 图像生成器 Javascript/HTML 的分离代码答案

【问题标题】：Separating code for QRcode image generator Javascript/HTMLQRcode 图像生成器 Javascript/HTML 的分离代码
【发布时间】：2017-03-16 09:52:27
【问题描述】：

当我仅在 HTML 上测试代码时，它工作得很好，但是当我分开它时，它没有显示 -surprise - 这是我的代码：

<!DOCTYPE html>
<html>
<body>
<img id='qrcode' src=''>
<button onclick="newQR()">Gerar QRcode</button>
<script>
  function newQR() {
    var x = Math.floor((Math.random() * 99) + 1);
    document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
  }
  newQR()
</script>
</body>
</html>

编辑：我想将它们分开，例如，在 script.js 中包含函数 newQR，在 index.html 中包含函数，如下所示：

 script.js
    function newQR() {
    var x = (Math.random() * 99999999999999999);
    document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
    return 
  }

index.html

 <!DOCTYPE html>
 <html>
 <body>
 <button onclick="newQR()">Gerar QRcode</button>
   <img = 'qrcode' />
    <script type="js/javascript" src="script.js"></script>
  </body>
 </html>

【问题讨论】：

它在我的编辑器上工作。另外，在函数之后调用“newQR()”是多余的。
它可以工作，但我不能分开，只留下一个HTML文件，只显示按钮和将生成的图像以及带有功能代码的JS文件。
你创建了你的javascript文件了吗？如果是，请向我们展示该文件中的代码。
是的，我编辑了问题，抱歉没有更具体，
会不会是你忘记了图片上的“id”标签？

标签： javascript html

【解决方案1】：

您的问题可能只是您忘记了HTML<img = 'qrcode' /> 这一行中的id 属性

尝试将其更改为：<img id='qrcode' src=''>

但是，如果在尝试之后......手头的问题仍然存在，那么我建议您尝试以下示例。

将您的 HTML 标记更改为：

<body>
  <img id='qrcode' src=''>
  <button id="Btn">Gerar QRcode</button>
  <script type="text/javascript" src="script.js"></script>
</body>

在您的javascript 文件中简单地实现这个：

document.getElementById("Btn").addEventListener("click", function(){
    var x = (Math.random() * 99999999999999999);
    document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
});

如果您愿意，也可以使用此版本的 javascript：

document.getElementById("Btn").addEventListener("click", newQR);

function newQR() {
   var x = (Math.random() * 99999999999999999);
   document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
}

【讨论】：

Eduarda Buss 已两次提交此问题，但您提出了更改建议，但未标记此帖子的任何答案，因此我不会浪费更多时间。 stackoverflow.com/questions/42823679/…
@NewToJS 我看到了，所以 OP 在网站上多次发布了这个问题。无论如何，感谢您的推荐，请注意，您提供给我的链接不是我向 OP 推荐的。
NewtoJS 不是我，是我的同事。我们有同样的问题，他坚持要问两次。很抱歉。

【解决方案2】：

您现在缺少的是必须按顺序放置的引用 js 文件的顺序。您需要附加的第一个 js 文件是 QR js 文件，然后是您自己的脚本。

顺便说一句，总是建议将您的 js 文件附加到 body 标记处。顺便说一句，这里还有一个提示，您应该知道，您需要通过简单地将 js 方法放在一个简单的块中来确保所有 dom 元素都已加载：

(function() {
 // You are ensuring that the page is loaded completely.
  newQR();
})();

这里是示例 HTML 代码：

//// my myownsrc.js
function newQR() {
    var x = Math.floor((Math.random() * 99) + 1);
    document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
  }
   (function() {
   // You are ensuring that the page is loaded completely.
   newQR();

})();

<!DOCTYPE html>
<html>
<body>
<img id='qrcode' src=''>
<button onclick="newQR()">Gerar QRcode</button>
<script src="qrimage.js"></script>
<script src="myownsrc.js"></script>
</body>
</html>

【讨论】：