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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question! Please help me!

    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.
    Last edited by Jack27; 02-18-2009 at 04:30 PM.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Hi. Welcome, and all that.

    You sound young. Here are some free guidelines for life:

    1. If you're going somewhere new, find out what their customs are. This might mean "don't eat with your left hand", or it might mean "read the FAQ before posting".

    2. A little effort goes a long way. A list of "things you need us to do for you" isn't going to get nearly as positive a response as "here's what I've tried and here's what it's not doing right"

    3. If you're going to ask someone to do your homework for you, for pity's sake at least try to disguise it a little. Don't just copy your assignment onto the interwebs in the hope that someone will help you. That's just lazy.

    Now, try again.

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, it's not like that. I am working hard on it right now. I just don't understand it, but I will use your advice and check out the FAQs on this website, maybe that will help. I am just having trouble in figuring this out, I am not really a computer person. I can see where you are coming from though and it does seem like I just copy/pasted a homework assignment.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the HTML part of I have sort of configured. I know it's wrong, but that's why I need help:

    <?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 Javascript part, which I also know is entirely wrong. I just don't understand:

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

  • #5
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Ok, this is more like it Sorry if I seemed harsh earlier.

    So - a few things. First, could you do us a favour and put code into the CODE tags when you're posting? Makes it much easier to read.

    Second - you've got some basic errors in your HTML. It's hard to get the javascript to work right when the document it's trying to interact with isn't properly structured. Two obvious ones are that you've left out the <body> tags, and that your form <input> elements shouldn't be inside the <label> elements.

    You should always run your code through a validator so you know that what you're working with is... well, workable with.

    Regarding your javascript: you don't say what exactly it's doing wrong, but to start with your first select box - you've got this in it:

    onchange="getValue(f);"

    but it doesn't know what "f" is. So you're getting an error. Have a read on the "this" keyword:

    onchange="getValue(this);"


  •  

    Posting Permissions

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