Separating code for QRcode image generator Javascript/HTML

Question

Welcome To Ask or Share your Answers For Others

Separating code for QRcode image generator Javascript/HTML

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

When I tested the code only on HTML it worked just fine, but when I separate it doesn't show -surprise - here's my code:

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

EDIT: I want to separate them, for example, having the function newQR inside script.js and the rest inside index.html, like this:

 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

274 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:23:41+0000

Your problem could simply be that you've forgotten the id attribute within this line of your HTML <img = 'qrcode' />

Try changing that to this: <img id='qrcode' src=''>

However, if after trying... the problem at hand still persists then I'd recommend you to try the examples below.

Change your HTML markup to this:

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

Within your javascript file simply implement this:

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;
});

or this version of javascript if you prefer:

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

Categories

Separating code for QRcode image generator Javascript/HTML

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags