Need a little guidance

I am working on friends website and he would like to generate a unique user id for each user. The username should be:

“LTM(Life Time Member) + the last two digits of the year they join + a number code for their region + a random five digit number”.

Here is the code I have come up with so far (and a link to the JS Fiddle - please pardon the 404 error, I have not quite debugged that…) For right now I need to focus on why the code that takes the users input from the radio buttons and assigns a number code is not working. Any guidance would be appreciated. Thank you.

index.html

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Welcome to <b>Overlanding</b>! Please fill out the form below to unlock your personal access to the fastest growing community of adventurers, over-landers, and explorers.</p>
        <form>
            <h3 for="region">Select Region</h3>
                <b>Northern Hemisphere</b><br>
                <input type="radio" name="region" id="region" required>
                <label for="North America">North America</label><br>
                <input type="radio" name="region" id="region">
                <label for="Europe">Europe</label><br>
                <input type="radio" name="region" id="region">
                <label for="Russia">Russia</label><br>
                <input type="radio" name="region" id="region">
                <label for="Japan">Japan</label><br><br>
                <b>Southern Hemisphere</b><br>
                <input type="radio" name="region" id="region">
                <label for="South America">South America</label><br>
                <input type="radio" name="region" id="region">
                <label for="Australia">Australia</label><br>
                <input type="radio" name="region" id="region">
                <label for="Africa">Africa</label><br><br>
                <b>Globe Spanning</b><br>
                <input type="radio" name="region" id="region">
                <label for="Asia">Asia</label><br>
                <input type="radio" name="region" id="region">
                <label for="North and South Poles">North & South Poles</label><br>

                <p>-----------------------------------</p>

                <label for="fname">First name:</label>
                <input type="text" id="fname" name="fname" required><br><br>
                <label for="lname">Last name:</label>
                <input type="text" id="lname" name="lname" required><br><br>

                <input type="submit" value="Submit" onclick="compileUniqueID()">
        </form>

        <p>Your unique ID is: <span id="result"></span></p>
        
        <script src="app.js"></script>
    </body>
</html>

app.js

function compileUniqueID() {
    // Gets the year and shortens it to the last two digits of the four digit year
    let getYear = () => {
        var d = new Date();
        //Gets the current year
        var year = d.getFullYear();
        //Removes the first two digits of the year
        year = year.toString().substr(-2);
        return year
    };
    console.log(getYear());

    // Takes the region selected from the radio button menu in index.html and assigns a unique two digit number to the specific region.
    let setRegion = parseInt(document.getElementsByName('region').value)
    //setRegion = "North America"
    
    let region = () => {
        if(setRegion === "Africa") {
            return "01"
        } else if(setRegion === "Asia") {
            return "02"
        } else if(setRegion === "Australia") {
            return "03"
        } else if(setRegion === "Europe") {
            return "04" 
        } else if(setRegion === "North America") {
            return "05"
        } else if(setRegion === "South America") {
            return "06"
        } else if(setRegion === "Russia") {
            return "07"
        } else if(setRegion === "Japan") {
            return "08"
        } else if (setRegion === "North and South Poles") {
            return "09"
        } else return "Select a region please" 
    };
    console.log(region());

    // Compiles the year and the region and the users randomly generated five digit id together into a string and appends the text "LTM" (Life Time Member) to the front of the unique ID number
    return "LTM" + getYear() + region() + Math.floor(10000 + Math.random() * 90000)
};

// Returns the unique id to the webpage in the space "Your unique ID is: ____"
document.getElementById('result').innerHTML = compileUniqueID();

What am I missing?

I would suggest initializing an empty array at the start of your program.

Then push the strings to it as you go.

Then render that at last. That way you can see what’s going on visually a bit.

1 Like