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 :)
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.
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>