How will we print the number of tickets the user asks for?
If we knew the user would want three tickets, we could just write the printing instructions 3 times, but since we don't know, we'll use a loop which is a list of instructions that we run one or more times depending upon the situation. (This is a common structure that you'll find in most programming languages).
The anatomy of a loop:
for(i=0;i<totalNumber;i++)
{
alert("This is number " + i);
}
First, notice the curly brackets and the line of code in between - this should look familiar because it's just like a function - the brackets enclose the list of instructions to be followed whenever this loop runs.
The unique part is the first line: for(i=0;i<totalNumber;i++)
It always starts with "for"
There are three things in the parenthesis:
(i=0;i<totalNumber;i++) the first part sets up a variable (notice that you don't need the word "var" here). The variable could have any name, but in this case, its name is "i" (which stands for "integer") and its been set equal to '0'.
(i=0;i<totalNumber;i++) the second part tells the loop how many times to run. In this case, it will run as long as 'i' is less than the value of a variable called "totalNumber" (this variable would have been created earlier in the code).
(i=0;i<totalNumber;i++) the final part uses shorthand. i++ says to add 1 to the value of the 'i' variable each time the loop is completed
We're ready to insert a loop, but first we'll clean things up a bit.
1. Carefully delete all of the "alert" statements in your function to make it easier to read. You should be left with 4 lines inside your function - 3 that define variables, and one that prints the ticket (the one that starts "document....".
We're going to put the line that prints the ticket inside the loop.
2. Type the following two lines before the "document...." line:
for (i=0;i<numberTickets;i++)
{
3. And type a closing curly bracket: } after the "document..." line
You have a loop (but we need to fix it a little more)
4. Right now, the "document..." line looks like this:
document.getElementById("result").innerHTML = "MAIN PERFORMER: " + chosenConcert + " ATTENDEE: " + nameEntered;
Notice that it's looking for an element with an id "result". That doesn't exist anymore since we renamed it.
5. Change "result" to "result0".
6. Save your page and open it in a browser. Choose a concert, type a name, choose a number and click the button. If everything is correct, you should see one ticket (no matter how many you asked to print).
If the ticket didn't appear, review the above instructions carefully and try again
If it did, you may be wondering why it only printed one ticket. Here's what happened:
Say you chose "3" from the drop-down list.
When the loop starts, it sets i equal to 0 and carries out the instruction which tells it to replace the contents of the cell called "result0".
Then, to decide if it should run the loop again, it checks the instructions in the parentheses: i=0;i<numberTickets;i++:
First it adds 1 to i (i.e. it carries out the i++ statement) so now i = 1 (0 + 1 = 1)
Second, it checks to be sure that i is less than "numberTickets" (i<numberTickets). Since i = 1 and numberTickets = 3, this is true.
SInce the condition is true, it runs the loop again and prints another ticket. But it puts the ticket in the same cell as before (the one labeled result0) so it overwrites it and we don't see any change.
To fix that, we need to change which cell it prints to each time:
7. Modify the "document..." line by replacing "result0" with "result" + i
8. Save your page. Open it in a browser. Choose a concert, type a name and choose a number. Now you should see the correct number of tickets printed. Hooray!
If you don't see the correct number, do some troubleshooting. Try using alert statements to figure out what's happening. For example, is the loop not running? To find this out, put an alert statement in the loop. It should bring up a popup box each time it runs.
9. When you're done, be sure to move your file Lab06&7.html to your Lab06&7 folder online
10. The last thing you need to do is to answer the final two questions in the Catalyst quiz.