javascript: load external library correctly

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 🙂

Answer

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.