Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simpler way to use arrays?

    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]);

    </script>



    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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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:-

    Code:
    <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>
    
    </script>
    Learn from it, please.


    Quizmaster: Which ancient Greek poet is also the first name of a main character in "The Simpsons"?
    Contestant: Bart
    Last edited by Philip M; 03-08-2012 at 05:59 PM. Reason: typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Code:
    <style>
      div{padding:20px 5px}				/*we don't need all those line breaks if we use a stylesheet*/
    </style>
    
    <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>
    </form>
    
    <button type="button" id="Populate">List Names</button>
    
    <div id="teamNamesContainer"></div>
    
    <script>
    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
    </script>
    Edit:
    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
    Last edited by blaze4218; 03-08-2012 at 06:33 PM.
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •