You will create a new JSFiddle called Array Example. For this example you will c
ID: 664401 • Letter: Y
Question
You will create a new JSFiddle called Array Example. For this example you will create in JavaScript an Array of strings - you will populate it with the first names of each of the members of this class.
Class Member Names: Kyle, Vanessa, Todd, Ronald, Andrea, Michael, John, Shawn, Jeramiah, Roger, Jayson, Joseph, Thomas, Michele, Evan, Jad, Blanca, Gary
You will create a button with the Text - "Pick One", when I click the button it will call a function that will randomly pick one member of the Array - and print that person to the screen.
Explanation / Answer
Member.js
//global array: it's outside any function
var members = new Array ["Kyle", "Vanessa", "Todd", Ronald, "Andrea", "Michael", "John", "Shawn",
"Jeramiah", "Roger", "Jayson", "Joseph", "Thomas", "Michele", "Evan", "Jad", "Blanca", "Gary"];
//init() function
function init()
{
var myButton = document.getElementById("btnSubmit");
myButton.onclick = registerName;
}
//assign init() function to onload event
>
//registerName() function: it executes when user clicks the button
function registerName()
{
var newName = document.getElementById("txtName").value.toLowerCase();
var message = "";
var result = document.getElementById("result");
var success = false;
//If the user clicks the button but the inputbox is empty
if (newName == "")
{
alert("Please, enter a Username");
return false;
}
for (var i = 0; i < members.length; i++)
{
//if we find a Username equal to the newly entered name,
//proceed with registration
if (members[i] == newName)
{
message = "Sorry, the Username " + members[i] + " already exists. Try again";
result.innerHTML = message;
success = false;
return false;
}
//else - if the Username entered by the user
//is not already stored in the application, register new user:
else
{
message = "Great, you've successfully registered with us as " + newName;
result.innerHTML = message;
//the new Username can be added
success = true;
}
}
//if registration was successful (success flag is true),
//add new Username to the array with push()
if (success)
{
members.push(newName);
}
//display members sorted alphabetically on a new line
result.innerHTML += "<br />" + members.sort();
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Lesson 13: JavaScript Objects - Arrays</title>
<script type="text/javascript" src="Member.js"></script>
</head>
<body>
<h1>Register</h1>
<p>Register a Username: <input type="text" id="txtName" /></p>
<p><input type="button" id="btnSubmit" value="Pick one" /></p>
<p id="result"></p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.