Question

当我仅在HTML上测试代码时，它运行得很好，但是当我将它分开时，它并没有显示出来 - 这是我的代码：

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

Answer 1

您的问题可能只是因为您忘记了id HTML

这一行中的<img = 'qrcode' />属性

尝试将其更改为：<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;
}

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

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

2 个答案: