Issue
I'm trying to randomly generate a barcode with a font on page load. I want the length to be 36 characters long, consisting of only 0-9, a-z and A-Z. I want to have a <span> print the generated string. The code I have currently generates the random string, but it's printing it at the top of the page. I also want to do this with the AUTH and TOKN numbers as well, only with 10 characters of 0-9 and a-z. I currently have those two working as randomly generated 10-character numbers, but as I said, that's not what I want to do in the long run. Here is my current code.
function showRandomNumber() {
document.getElementById("authnumber").innerHTML =
Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
document.getElementById("tokennumber").innerHTML =
Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
}
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i)
result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
document.write(randomString(36, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
randomString();
showRandomNumber();
#barcode {
font-family: "Code 128";
font-size: 44.5px;
display: inline-block;
-moz-transform: scaleY(.73);
-webkit-transform: scaleY(.73);
transform: scaleY(.73);
float: left;
}
#myNumber {
margin: 2px;
font-family: "OCR A Extended", "OCR A";
font-size: 16.75px;
margin-top: 6.5px;
}
<div class="warning_menu_container" style="margin-top:7px; margin-bottom:-11px;">
<span id="barcode" style="margin-top:-7px; ">insert random string of text here 01</span>
<span id="myNumber">AUTH:<font color="1fa779"><span id="authnumber" style="align:right;"></span></font>
</span><br />
<span id="myNumber" style="line-height: 1.1;">TOKN:<font color="1fa779"><span id="tokennumber"></span></font>
</span>
</div>
I've tried the code I currently have written up, as shown.
Solution
I think you can simply remove the line for document.write(...)
and only call the randomString()
function during the onload event.
Something along the lines of:
function showRandomNumber() {
document.getElementById("authnumber").innerHTML =
Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
document.getElementById("tokennumber").innerHTML =
Math.round(Math.random() * (9999999999 - 1000000000) + 1000000000);
// use randomString() for barcode??
document.getElementById("barcode").innerHTML =
randomString(36, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
}
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i)
result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
// show all numbers
showRandomNumber();
#barcode {
font-family: "Code 128";
font-size:24px;
display: inline-block;
-moz-transform: scaleY(.73);
-webkit-transform: scaleY(.73);
transform: scaleY(.73);
float: left;
margin-top: -7px;
}
#myNumber {
margin: 2px;
font-family: "OCR A Extended", "OCR A";
font-size: 16.75px;
margin-top: 6.5px;
color: #1fa779;
text-align: right;
line-height: 1.1;
}
<div class="warning_menu_container">
<div id="barcode"></div>
<div id="myNumber">
AUTH: <span id="authnumber"></span>
</div>
<div id="myNumber">
TOKN:<span id="tokennumber"></span>
</div>
</div>
Answered By - blurfus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.