View Full Version : simpler way to use arrays?

03-08-2012, 06:03 PM
Hi again folks!

A code I did recently was that 10 football teams had to register and the program had to ask the question "please enter your team" ten times then show the display on screen.
This code works fine and does it jobs but I realized that I did this program a long winded way (shown below) :

<script type="text/javascript">

//ask to enter names
var enteredteam1= prompt("Please enter first team.", ""); //each team is shown as different variable
var enteredteam2= prompt("Please enter second team.", "");
var enteredteam3= prompt("Please enter third team.", "");
var enteredteam4= prompt("Please enter forth team.", "");
var enteredteam5= prompt("Please enter fifth team.", "");
var enteredteam6= prompt("Please enter sixth team.", "");
var enteredteam7= prompt("Please enter seventh team.", "");
var enteredteam8= prompt("Please enter eighth team.", "");
var enteredteam9= prompt("Please enter ninth team.", "");
var enteredteam10= prompt("Please enter final team.", "");

var team= [];

team[1]= enteredteam1 //the team should equal the entered value for the space
team[2]= enteredteam2
team[3]= enteredteam3
team[4]= enteredteam4
team[5]= enteredteam5
team[6]= enteredteam6
team[7]= enteredteam7
team[8]= enteredteam8
team[9]= enteredteam9
team[10]= enteredteam10

document.write("<h1>Registered Teams</h1>");

// display the teams on the screen beside number

document.write("<b>1.</b>" + team[1]); //write the entered value on the screen
document.write("<br><br><b>2.</b>" + team[2]);
document.write("<br><br><b>3.</b>" + team[3]);
document.write("<br><br><b>4.</b>" + team[4]);
document.write("<br><br><b>5.</b>" + team[5]);
document.write("<br><br><b>6.</b>" + team[6]);
document.write("<br><br><b>7.</b>" + team[7]);
document.write("<br><br><b>8.</b>" + team[8]);
document.write("<br><br><b>9.</b>" + team[9]);
document.write("<br><br><b>10.</b>" + team[10]);


I was wondering for future references could anyone suggest a simpler code to do something similar?
For instance what if I wanted to ask the question but I didn't know how many teams were going to be entered. It would ask the question (enter your team) until the user clicked on a button saying "finished" or something.

Once again, I am new to this field, so any code with comments would be helpful!

Philip M
03-08-2012, 06:45 PM
Your code is not only unwieldy but obsolete. prompt() is a very primitive method of entering data. document.write() is also antique and unsuitable for writing output to the screen. And you have no validation that the data entered is even remotely sensible.

If you see repetition in your code, it is a sure sign that you can simplfy it.

Try this:-

<div id = "list"></div>

<script type = "text/javascript">

var teamnames = [];
var ans;
while (ans = window.prompt("Enter the next name, then OK, or Cancel to end"," ")) {
ans = ans.replace(/^\s+/,""); // strip leading spaces
if ((/[^A-Z\s]/gi.test(ans)) || (ans == "")) { // must be only alpha letters or a space
alert ("You must enter a valid name!! ");
else {
teamnames.push(ans); // add the team name to the array
} // continue until Cancel is clicked
var mylist = "<h1>Registered Teams</h1><br>";
for (var i = 0; i<teamnames.length; i++ ) {
mylist += "Team " + (i+1) + " : " + teamnames[i] + "<br>";

document.getElementById("list").innerHTML = mylist; // display it in the <div>


Learn from it, please.

Quizmaster: Which ancient Greek poet is also the first name of a main character in "The Simpsons"?
Contestant: Bart

03-08-2012, 07:15 PM
div{padding:20px 5px} /*we don't need all those line breaks if we use a stylesheet*/

<form name="teamNames" id="teamNames">
<input id="team0" name="team0"><br>
<input id="team1" name="team1"><br>
<input id="team1" name="team2"><br>
<input id="team3" name="team3"><br>
<input id="team4" name="team4"><br>
<input id="team5" name="team5"><br>
<input id="team6" name="team6"><br>
<input id="team7" name="team7"><br>
<input id="team8" name="team8"><br>
<input id="team9" name="team9"><br>

<button type="button" id="Populate">List Names</button>

<div id="teamNamesContainer"></div>

document.getElementById('Populate').onclick = function(){ // document.getElementById() is what we use to assign events to HTML objects the event we are assigning to Populate is the 'onclickc' event. That means that everytime someone clicks the Populate button we will execute the following code
var namesHTML = ''; // We want to display all the new HTML code simultaneously. Main reason is for performance. If we store all the information as a string, we can write the entire string to the document at once.
var Container = document.getElementById('teamNamesContainer'); // This is where we want to write our team names :)

for ( var i = 0 ; i<teamNames.length ; ++i) { // Create a loop that executes again, and again until the variable i is equal the the quantity of elements inside the teamNames form
if (teamNames[i].value) { // We don't really need any error prevention for this simple script, but it's good to know how. Lets test to make sure the element is actually an input with a value to display...
namesHTML += '<div>' + (i+1) + '. ' + teamNames[i].value + '</div>'; // Structure the HTML and add it to our namesHTML string. In case you didn't figure it out already: teamNames is an array, and we can access each node of the array with []. Since our loop has a different value for i with each iteration we can cycle through each node of the array with [i]
} // close the condition test
} // close the loop

Container.innerHTML = '<h1>Registered Teams</h1><br>'; // Write our header
Container.innerHTML += namesHTML; // Write our team names

this.style.display = 'none'; // Hide the stuff we don't need anymore
teamNames.style.display = 'none'; // Hide the stuff we don't need anymore
} // close our event handler

I just noticed I left two things out. The reason for the (i+1) is because you need numbers one through whatever, whereas arrays are measured zero through whatever, this adjusts the array index to what you need