javascript: load external library correctly-CodePudding

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 anothe rfile 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 :)

CodePudding user response：

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.

CodePudding user response：

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>