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=""></script>

/* Basic and simple one */
<div id="qrcode"></div>

<script type="text/javascript">
  new QRCode(document.getElementById("qrcode"), "");

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 = ""

  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "",
    width: 128,
    height: 128,
    colorDark: "#5868bf",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H

And the div:

<div class="qrcodecontainer">
    <div id="qrcode"></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=""></script>

var src=””, this will assign value to var src;

Load script in html.