Trying to generate a random number for QRcode Javascript - 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".

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.

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

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>

Related

Can't figure out how to randomly generate numbers with a button in javascript

followed a tutorial just with different layout and names and still can't seem to find whats wrong?
<!DOCTYPE html>
<html>
<head>
<script>
function myrandom() {
var x = math.floor((math.random() * 10) + 1);
document.getElementById("rand").innerHTML = x;
}
</script>
</head>
<body>
<button onclick="myrandom()">Generate</button>
<p id='rand'></p>
</body>
</html>
Reason :
What you are doing wrong is that you are using math instead of Math. JavaScript is case sensitive and Math is defined while math is not.
Corrected :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myrandom()">Generate</button>
<p id='rand'></p>
<script>
var myrandom = () => {
var x = ~~((Math.random() * 10) + 1);
document.getElementById("rand").innerHTML = x;
}
</script>
</body>
</html>
Also please note that it is better that you write the JS code at the end of the body tag and the script tag is the last one in the body tag.
Note :
Note that I edited the snippet provided by you.
The following edits were made
The script tag was moved at the end of body tag
I changed the function and used arrow syntax instead of normal declaration
Changed Math.floor into bitwise ~~
Resources :
Stack overflow script tag
W3 schools script tag
bit wise operators mozilla
bit wise operators W3 schools
Arrow function mozilla
You have a typo, You need to capitalize the first letter of math -> Math.
<!DOCTYPE html>
<html>
<head>
<script>
function myrandom() {
var x = Math.floor((Math.random() * 10) + 1);
document.getElementById("rand").innerHTML = x;
}
</script>
</head>
<body>
<button onclick="myrandom()">Generate</button>
<p id='rand'></p>
</body>
</html>

Separating code for QRcode image generator Javascript/HTML

When I tested the code only on HTML it worked just fine, but when I separate it doesn't show -surprise - here's my code:
<!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>
EDIT: I want to separate them, for example, having the function newQR inside script.js and the rest inside index.html, like this:
script.js
function newQR() {
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
return
}
index.html
<!DOCTYPE html>
<html>
<body>
<button onclick="newQR()">Gerar QRcode</button>
<img = 'qrcode' />
<script type="js/javascript" src="script.js"></script>
</body>
</html>
Your problem could simply be that you've forgotten the id attribute within this line of your HTML <img = 'qrcode' />
Try changing that to this: <img id='qrcode' src=''>
However, if after trying... the problem at hand still persists then I'd recommend you to try the examples below.
Change your HTML markup to this:
<body>
<img id='qrcode' src=''>
<button id="Btn">Gerar QRcode</button>
<script type="text/javascript" src="script.js"></script>
</body>
Within your javascript file simply implement this:
document.getElementById("Btn").addEventListener("click", function(){
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
});
or this version of javascript if you prefer:
document.getElementById("Btn").addEventListener("click", newQR);
function newQR() {
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
}
What you are missing right now is the order of reference js files which must be placed in-order. The first js file you need to attach is the QR js file and then, your own script.
By the way, it is always recommended to have your your js files appended at the body tag. By the way, here is another tip that you should be knowing that you need to ensure that all dom elements have been loaded by simply putting your js methods in a simple block:
(function() {
// You are ensuring that the page is loaded completely.
newQR();
})();
Here is the sample HTML code:
//// my myownsrc.js
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
}
(function() {
// You are ensuring that the page is loaded completely.
newQR();
})();
<!DOCTYPE html>
<html>
<body>
<img id='qrcode' src=''>
<button onclick="newQR()">Gerar QRcode</button>
<script src="qrimage.js"></script>
<script src="myownsrc.js"></script>
</body>
</html>

JavaScript set interval not working?

Could someone please explain why the following code below doesn't run an automated sequence of images'. I was able to do this before with my code prior to this now that I have edited it slightly the automation doesn't work.
<!DOCTYPE html>
<html>
<body>
<img id="Light" src="./red.jpg">
<button type="button" onclick="ChangeLights()">Change Lights</button>
<script>
var List = [
"./red.jpg",
"./redyellow.jpg",
"./green.jpg",
"./yellow.jpg",
];
window.onload = "ChangeLights()";
var index = -1;
function ChangeLights() {
index ++;
var image = document.getElementById('Light');
image.src = List[index % List.length];
}
setInterval(ChangeLights, 1000)
</script>
</body>
</html>
It works fine, but you can change Array to a different name and call ChangeLights(); without "" in line 18 .
The automation works, but the path to the images is wrong, you should fix that by pointing to the right folder, probably by removing the "./" on "./NAME_OF_THE_IMAGE".

javascript runtime error 0x800a1391

I'm learning a bit HMTL5 to prepare to the 70-480 exam. I'm trying to do some javascript code. It looks something like this:
function inchestometers(inches) {
if (inches < 0)
return -1;
else {
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
and I have such html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Htnl 5 test</title>
<script src="script/test.js"></script>
</head>
<body>
<p id="hello">Hello</p>
</body>
</html>
In my VS 2012 i have used the Asp.net Empty Web application project and added the Js file and also the html file. The problem is that The function runs properly without any exeptions. This function is taken from here: http://msdn.microsoft.com/en-us/library/cte3c772(v=vs.94).aspx
But whem I'm trying to run the code where I'm getting the document element it' crashint with the error like in the subject. What I've investigated is that the hello gets the null value. I've also tried the code thaken from here:
http://msdn.microsoft.com/en-us/library/yfc4b32c(v=vs.94).aspx - the example with the div. I have the same effect.
What is wrong? I know that there were simmilar subjects but I can't seem to find one matching to mine. Thank you kindly for your help.
Regards
Rafal
you are getting a problem because your javascript code is running before the element
<p id="hello">
is defined.
the simplest solution is to include your script at the end of the body section instead of in the head section but this would cause the document.write call to occur after the rest of the content.
another solution would be to place the code inside two functions like this
function do_conversion() {
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
}
function say_hello() {
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
}
then change the body section like this
<body onload='say_hello()'>
<script>
do_conversion();
</script>
<p id="hello">Hello</p>
</body>

.innerHTML problems storing it into a variable

Here is my code that is not working - thanks guys - first question!
<html>
<head>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
</script>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
Also sorry for the update but do you guys have an idea of how to do this when the div is in an iframe thats not on the same domain? Thanks
This line
var x = document.getElementById("myElementId").innerHTML;
is executed before the element with ID myElementId exists, so JavaScript cannot find it (getElementById returns null).
Put it after the element:
<div id="myElementId">24</div>
<script>
var x = document.getElementById("myElementId").innerHTML;
</script>
The HTML document is processed from top to bottom.
You're running this line:
var x =document.getElementById("myElementId").innerHTML;
before the element exists. Remove the script from the head an put that line right before:
if(x < 25) {
Instead.
In addition to the creating the element first,
I believe innerHtml returns a string value
Try parsing it first;
var value = document.getElementById("myElementId").innerHTML;
var x = parseInt(value,10)
change it to:
<html>
<head>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
the element that you are trying to look for does not even exist on the page when you run the script that is why you have run into this issue..
document.getElementById("myElementId").innerHTML;
You have to use a # with Id and . with class in it
document.getElementById("#myElementId").innerHTML;

Categories

Resources