Search code examples
javascriptqr-code

qr code generator in js

i am trying to generate qr code using this plugin:

http://davidshimjs.github.io/qrcodejs/

my code is:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <input id="text" type="text" value="https://hogangnono.com" style="width:80%" /><br />
    <div id="qrcode"></div>

<script type="text/javascript" src="javascripts/qrcode.min.js">

var qrcode = new QRCode("qrcode");
</script>

</body>
</html>

but all i get is an input field with its value in it and no QR Code is generated. No errors in console either what could be the problem?

Solution

  • The <script> element can have a "src" attribute or contents, but not both.

    When you wrote

    <script type="text/javascript" src="javascripts/qrcode.min.js">
var qrcode = new QRCode("qrcode");
</script>

    you were trying to both load the qrcode javascript and specify your own javascript, which is not allowed with the <script> element.

    Instead, load the qrcode javascript (along with the jquery reference as Vinayak mentioned) inside your HTML file's <head> section:

    <script type="text/javascript" src="./javascripts/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/qrcode.min.js"></script>

    and then specify your own javascript inside its own script element below (like you have it, without the "src" tag):

    <script>
  var qrcode = new QRCode("qrcode");
</script>

    That should work for you.