JavaScript Forum

**Richard27** · 02-18-2009, 12:55 PM

I am having trouble working this out! I have been working on this forever and it is really difficult for me. I am new to Java Script and it's annoying! I would like anyone if they can to show me how to do this problem and explain the steps it takes to do that. Thanks I would really appreciate it. They want this written in two basic text documents as two separate files, one as an html and the other as js, which both go together, I don't know. Please help! Thanks:

1. Create a web page that looks like the following:

Choose a Movie: (this should be a drop down box with movie titles)
Name: (this should be a text box)
(right here is three radio buttions: Child, Adult, and Senior)
How many: (another text box) (followed by a button called Purchase)

Build things in pieces. Start with the drop-down box. Then add some options. Then add the text field and then add the button.

2. Add an event handler to the button (see Button Click Event Handler in the slides).

3. Start by having the event handler make a pop up box appear that says the movie name. In other words, when you click the button, a pop up box appears with the selected movie name.

4. Change the movie name and click the button. Does the pop up box say the new movie name?

5. Now have the pop up box also show the customer's name. Change the customer's name and verify that the message is different in the pop up box.

6. Now format the message. It should say: <customer name>, you just purchased a ticket for <movie name>

7. In the HTML, add an empty paragraph (<p></p>) below the text field and button.

8. The event handler should change the <p>'s innerHTML to be the text you put in the pop up box (remember to give the <p> an id). Look at the examples in the slides to see how to change innerHTML.

9. Remove the pop up box from the event handler. It should no longer appear.

Make sure that you can only click on one radio button at a time. Add <label> like in the slides, so that you can click on the words next to the radio button, instead of having to click exactly on the circle.

Remember: Build things in pieces!

10. The prices are as follows: child ($5), adult ($10), senior ($7). When the "Purchase" button is clicked, the price will be shown to the user. See below:

Start out by having the Purchase button pop up a box saying which radio button was pressed. There are two ways to solve this: (a) you can use 3 different if statements to check which radio button is activated (use the "checked" attribute) or (b) you can use a for loop that loops through the radio buttons trying to find which one is checked.

11. Now use the fact that you know which radio button is activated to set the price. If you decided to do method (b), you should store the price in the value attribute of the radio buttons, that way, when you find that a radio button is checked, then you know the price is in document.getElementById("...").value

12. Now make it so that the Purchase button event handler will also take into account the number in the "How many" box. You'll have to save your message in a variable and then continually add it to another variable.

**wayfarer07** · 02-18-2009, 03:52 PM

You want us to do your assignment for you, or are you having a hard time with a certain part?

**Richard27** · 02-18-2009, 04:49 PM

I am having trouble really writing the javascript part with the functions and stuff. I think I have the HTML part of the problem right sort of, but I don't understand functions and all of that. I am trying to figure it out, but I am having trouble.

To show you that I am not just asking you guys to do my homework. I'll show you my work so far, although it's entirely wrong. I just need your help, that's all. I have just been mostly experimenting with stuff. haha

This is my work for the HTML Part:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="radio2.js" type="text/javascript"></script>

<div>
Choose a movie: <select id="choices" onchange="getValue(f);" />
<option>Slumdog Millionaire</option>
<option>Madagascar</option>
<option>Transformers</option>
</select>
</div>

<div>
Name: <input type="text" />
</div>

<div>
<label>
<input type="radio" name="cards" id="cards1"
value="$5" onchange="showCard(1);" />Child
</label>
<label>
<input type="radio" name="cards" id="cards2"
value="$10" onchange="showCard(2);" />Adult
</label>
<label>
<input type="radio" name="cards" id="cards3"
value="$7" onchange="showCard(3);" />Senior
</label>
</div>

<div>
How many: <input type="text" id="text" /><br/>
<input type="button" value="Purchase"
onclick="sweet();" />
<p id="output">
</p>
</div>

<div>
Text: <input type="text" id="text" /><br/>
Times: <input type="text" id="times" /><br/>
<input type="button" value="Generate Sentences"
onclick="generate();" />
<p id="output">
</p>
</div>

</html>

AND THIS IS THE JAVA SCRIPT PART: (don't laugh, lol)

function showPick() {
var choice = document.getElementaryById("choices").value;
alert("You chose: " + choice);
}

function showCard() {
for (var i = 1; i <= 3; i++) {
var idToTry = "cards" + i;
if (document.getElementById(idToTry).checked) {
var value = document.getElementById(idToTry).value
alert("You picked: " + value);
}
}
}

function sweet() {
var times = document.getElementById("times").value;
var sentence = document.getElementById("text").value;
var text = "";
for (var i = 1; i <= times; i++) {
text += sentence + "<br />";
}
document.getElementById("output").innerHTML= text;
}

function getValue(f){
alert('You Chose ' + f.options[f.options.selectedIndex].value);
}
<select onchange="getValue(this);">

You see I don't know if some of these are not needed or what I am doing. I am totally lost. Please help!

**Richard27** · 02-18-2009, 05:19 PM

So can you are anyone help me?