1

I am very new to this. I am trying to generate a QR code and display it in my HTMl page.

I used this code:

/* Load the library */
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
/* Basic and simple one */
<div id="qrcode"></div>
<script type="text/javascript">
 new QRCode(document.getElementById("qrcode"), "https://webisora.com");
</script>

And when put into a div, this displays a QR code as whished.

Now I tried putting it into another file from which all javascript is loaded (and already working)

So i just put it into this function which will be called upon page load:

function LoadQRCode() {
 var src = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"
 var qrcode = new QRCode(document.getElementById("qrcode"), {
 text: "https://webisora.com",
 width: 128,
 height: 128,
 colorDark: "#5868bf",
 colorLight: "#ffffff",
 correctLevel: QRCode.CorrectLevel.H
 });
}

And the div:

<div class="qrcodecontainer">
 <div id="qrcode"></div>
</div>

But as no suprise, the console states that: Uncaught ReferenceError: QRCode is not defined

Which makes sense, as I dont know how to connect the loading of the libraray and he load of the QRCode variable.

But again, this code works when called directly from HTML.

HOw can I alter my function to also give me the same result?

Thank you :)

koloml
5252 silver badges16 bronze badges
asked Oct 27, 2021 at 12:42
6

2 Answers 2

2

You need to load script like:

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

var src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js", this will assign value to var src;

Load script in html.

answered Oct 27, 2021 at 12:48
Sign up to request clarification or add additional context in comments.

Comments

0

I think this will make sense

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
 <div id="qrcode"></div>
 <script type="text/javascript">
 var qrcode = new QRCode(document.getElementById("qrcode"), {
 text: "http://jindo.dev.naver.com/collie",
 width: 128,
 height: 128,
 colorDark : "red",
 colorLight : "white",
 correctLevel : QRCode.CorrectLevel.H
 });
 </script>
</body>
</html>
answered Oct 27, 2021 at 12:47

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.