CODEWITHSUNDEEP
javascripthtmlqr-code
Eduarda Buss
Eduarda Buss

Reputation: 87

Trying to generate a random number for QRcode Javascript

I am trying to generate a QRcode using QRcode api website (http://goqr.me/api/). In order to have a random QRcode being generated I need a random number, right now this is what I have:

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Gerar QRcode</button>

<p id="demo"></p>

<script>
function myFunction() {
var x = Math.floor((Math.random() * 99) + 1);
document.getElementById("demo").innerHTML = x;
}
</script>
<img src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo">
</body>
</html>

It generates a random number but it doesn't get to where it should be (after data=number here)

Can anyone please help me? Or guide me to the best way to do what I want.

EDIT: I want a new QRcode when I press the button "Gerar QRcode".

Upvotes: 1

Views: 2170

Answers (3)

Daniel Fuller
Daniel Fuller

Reputation: 31

Since you're already using inline scripting, the following might be appropriate:

<script>
var x = Math.floor((Math.random() * 99) + 1);
document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>")
</script>

So the example page you posted would look like this:

<!DOCTYPE html>
<html>
<body>    
<script>
    var x = Math.floor((Math.random() * 99) + 1);
    document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>")
</script>

</body>
</html>

EDIT:

To make it show a new QR code on button click (as mentioned in your comment), you'll need to change the src of the image to the new url. To do so, you'll also need a way to uniquely select the image you want to modify - it would probably be easiest to use an ID on the image tag and move the URL creation to a function.

This is very similar to what Caleb Mbakwe did in their answer:

<!DOCTYPE html>
<html>
  <body>
    <img id='qrcode' src=''>
    <button onclick="newQR()">Gerar QRcode</button>
    <script>
      function newQR() {
        var x = Math.floor((Math.random() * 99) + 1);
        document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
      }
      newQR()
    </script>
  </body>
</html>

If you were just trying to get it working for testing the API, then this should be fine. Otherwise, please read a bit about Unobtrusive Javascript to clean up the code. Also, creating the img tag in javascript and then inserting it into the page might be a cleaner, longer-term solution.

Upvotes: 2

Caleb Mbakwe
Caleb Mbakwe

Reputation: 178

From the api documentation, the QR code is the content of the data field of your request hence if you visit the url https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo in your browser, you will already see a QR code with the content being "demo".

What you need to do instead is concatenate your random number into the same field in your image source.

Something like this would suffice:

<script>
function myFunction() {
var x = Math.floor((Math.random() * 99) + 1);
document.getElementById("demo").src = document.getElementById("demo").src + x;
}
</script>

<img id="demo" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=">

Upvotes: 1

Ortomala Lokni
Ortomala Lokni

Reputation: 62555

One solution would be to generate the url from the script.

<script>
  function myFunction() {   
    var url = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
    var x = Math.floor((Math.random() * 99) + 1);
    url = url + x;
    document.getElementById("demo").src = url;
  }
</script>
<img id="demo" src="">
</body>
</html>

Upvotes: 0

Related Questions