CODEWITHSUNDEEP
javascriptqr-code
Vinayak Shrivastava
Vinayak Shrivastava

Reputation: 107

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?

Upvotes: 2

Views: 9981

Answers (3)

Burke
Burke

Reputation: 42

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.

Upvotes: 0

Vinayak Shrivastava
Vinayak Shrivastava

Reputation: 107

add 

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

to html

Upvotes: 1

Varun Gupta
Varun Gupta

Reputation: 11

Instead of writing

var qrcode = new QRCode("qrcode");

Write :-

var qrcode = new QRCode(document.getElementById("qrcode"), "*the name of site*");

The first parameter of the QRCode function is the div where you want the QRCode to be printed. Since you are not mentioning where to print the code, you are only getting the input box. Hope this helps!

Upvotes: 0

Related Questions