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?