CODEWITHSUNDEEP
javascripthtmlqr-codeparagraph
Muhammed Farzin Farooque T K
Muhammed Farzin Farooque T K

Reputation: 1

How to create a QR code of the content in <p /> using qrious?

I am trying to include a QR code in a Bill design that I am creating using qrious.js

ALL the examples on the internet use live text input to create the QR code, while I want a QR of the static text that I want. Please give some possible solutions.

Upvotes: -3

Views: 864

Answers (2)

Nizamuddin Shaikh
Nizamuddin Shaikh

Reputation: 420

You need to insert the qrious.js script before using it and then access the static information in the call to QRious object.

<!DOCTYPE html>
<html>
  <body>
    <p>Static link is</p>
    <p id="theLink">https://youtube.com</p>
    <p>QR code</p>
    <canvas id="qr"></canvas>
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js">    </script>
    <script>
      (function() {
        var qr = new QRious({
          element: document.getElementById('qr'),
          value: document.getElementById('theLink').innerText
        });
      })();
    </script>
  </body>
</html>

Upvotes: 0

Stefino76
Stefino76

Reputation: 369

Qrious readme file is very clear. You have to add your static text to value field.

var qr = new QRious({
  element: document.getElementById('qr'),
  value: 'Your static text'
});

Upvotes: 0

Related Questions