Random Generator to create custom URL variables

Question

I am trying to generate a custom URL with appended variables that are randomly generated.

Example: http://example.com/page1234.jsp?id=LOCATION_ID&user=USER_NAME&pass=PASSWORD

I'm fine with all of the variable data being numeric, and have been trying to use this to generate the random numbers:

<p>Click the button to join.</p>

<button onclick="genID5()">Join</button>

<p id="generateID1"></p><p id="generateID2"></p><p id="generateID3"></p>

<script>
function genIDA() {
    var x = Math.floor((Math.random() * 1000000000000) + 101);
    document.getElementById("generateID1").innerHTML = x;
        console.log(x);
}

function genIDB() {
    var y = Math.floor((Math.random() * 1000000000000) + 101);
    document.getElementById("generateID2").innerHTML = y;
        console.log(y);
}

function genIDC() {
    var z = Math.floor((Math.random() * 1000000000000) + 101);
    document.getElementById("generateID3").innerHTML = z;
        console.log(z);
}

function genID5() {
    genIDA();
    genIDB();
    genIDC();

}


</script>

I am getting some nice big random numbers, and then I am trying to use this to append the URL:

function genURL() { 
        document.action = window.location.href = "http://example.com/page1234.jsp?id=" + X + &user= y + &pass= + z; 
            return true; 
}

The URL function mostly works as far as pushing it to the Window object, and going to that URL - but getting the var values to insert is giving me a problem.

I am not sure if it is because they are not nested, but I am getting undefined errors. Ultimately I don't need/want the user to see the numbers, and if the page loaded and executed to the script and the loaded the destination, that would be OK as well. I wanted to see the output difference between the HTML and the Console, and having the button to execute it helped me see the steps.

Answer 1

There are a few problems. The variables storing your random numbers are in the local scope - outside of the functions that define them they are not accessible.

function setVar() {
   var foo = 'bar';
}
setVar();
console.log( foo ); // undefined

You can get around this by first declaring the variable in the global scope like so:

var foo;
function setVar() {
   foo = 'bar';
}
setVar();
console.log( foo ); // 'bar'

Note that if you use the var keyword in a function it will create a new local variable of the same name.

var foo;
function setVar() {
   var foo = 'bar';
}
setVar();
console.log( foo ); // undefined

You want to be careful when putting things in the global scope, as those variables are accessible from any script executing on the page, and you can sometimes run into situations where you (or someone executing your script) find that a variable's value has unexpectedly changed. This may not be necessary for your purposes, but it's my preference is to wrap things like this in a function or object, and create a pseudo class (Javascript doesn't have true classes yet). If you want to learn more here's another answer to get you started.

The second problem you have is with your genURL() function. Your quotes are imbalanced, and your variables are part of the string.

var x = 1, y = 2, z = 3;

console.log("Variables: x + , + y + , + z"); // 'Variables: x + , + y + , + z'

console.log("Variables: " + x + "," + y + "," + z); // 'Variables: 1,2,3'

Answer 2

OK so I figured it out... thanks @Grinde - I added global var calls, and then figired out how to inject them into the URL string...

Here's the final script code, with addresses changed to protect the innocent...

var firstName;

function genFirst() {

    firstName = Math.floor((Math.random() * 1000000000000) + 13579);
    document.innerHTML = firstName;
        console.log(firstName);
}

var lastName;

function genLast() {

    lastName = Math.floor((Math.random() * 1000000000000) + 111);
    document.innerHTML = lastName;
        console.log(lastName);

}

var email;

function genEmail() {

    email = Math.floor((Math.random() * 1000000000000) + 10101);
    document.innerHTML = email;
        console.log(email);

}

function genURL() {

    document.action = window.location.href = "http://domain.com/log_thru.jsp?eid=12345&seid=101" + "&email=" + [email] + "@fakemailacct.com" "&first_name=" + [firstName] + "&last_name=" + [lastName]; 
            return false; 
}

function genID() {

    genFirst()
    genLast()
    genEmail()
}

genID() 

It is then called in to action with the following HTML:

<!doctype html>

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> 

<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body>
        <script src="app2.js"></script>
        <p>Click the button to join the event.</p>

        <button onclick="genURL()">Join</button>
    </body>
</html>

Thanks for those of you who contributed and provided guidance!