SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to JavaScript...help please? :)

    I'm taking my first class in JavaScript and walking through the simple exercises in the first chapter...it had me code a page with radio buttons that, when selected, displays a chunk of text in a text area box... the code is as follows:

    document.write("<p><strong>Today's special</strong>: ");
    document.write("Buy a large meat lover's pizza<br />");
    document.write("and recieve a free Caesar salad ");
    document.write("and two liters of Diet Pepsi!</p>");

    var vegetarian = "Lots of mushrooms, black olives,
    bell peppers, onions, artichoke hearts,
    and fresh tomatoes. "

    var hawaiian = "Overloaded with juciy pineapple,
    smoked bacon, sliced ham, roasted red peppers,
    provolone cheese, and mozzarella cheese on a
    cheesy Parmesan crust."

    var meatLovers = "Loads of pepperoni, savory Italian
    sausage, smoked bacon, hamburger, mushrooms,
    and extra cheese."

    var theWorks = "An irresistible combination of
    pepperoni, ham, and spicy Italian sausage,
    fresh-sliced onions and green peppers,
    gourmet baby portabella mushrooms, and ripe
    back olives."

    var fourCheese = "Thin-crust pizza with a
    four-cheese blend of mozzarella, Parmesan,
    Romano, and Asiago, along with our special seasoning."
    </script>

    <form name="pizzaList" action="" method="get">
    <p>Click the buttons for a description of each pizza.</p>
    <p>
    <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=vegetarian" />
    Vegetarian<br />
    <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=hawaiian" />
    Hawaiian<br />
    <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=meatLovers" />
    Meat Lovers<br />
    <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=theWorks" />
    The Works<br />
    <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=fourCheese" />
    Four Cheese</p>
    <p>
    <textarea name="pizzaDesc" cols="75" rows="20"
    style="background-color: Transparent; border:
    none; overflow: hidden; font: 10px tahoma;
    color: #3F3F3F"></textarea></p>
    </form>

    Sorry if the formatting is weird, it didn't copy over well. But as of now the radio buttons display, but nothing displays in the textarea...

    If anyone has any advice for me, I'd be thankful! I can understand if it's simple and I'm overlooking something, I'm very new to JavaScript...thank you!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If your page is running in XHTML you would need to use

    Code JavaScript:
    document.forms['pizzaList']

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So would it look like this? Thank you for your help!

    <input type="radio" name="pizzas" onclick="document.forms['pizzaList'].pizzaDesc.value=vegetarian" />

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Usually radio buttons are not activated with onclick events because they are normally part of a larger structure in a form. I understand that you might want to keep it simple, but it is better to see what the script might look like in a "real" application. I have changed a few things around which might help you in your learning process.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
     
    <script type="text/javascript">
    <!--
    // put page content into string and write all at once 
    var build='<p><strong>Today\'s special<\/strong>: ';
    build+='Buy a large meat lover\'s pizza<br \/>\n';
    build+='and receive a free Caesar salad<br \/>\n';
    build+='and two liters of Diet Pepsi!<\/p>\n'; 
    //
    // create an array of your descriptions. Access them using radio button values
    var menu= new Array();
    menu["vegetarian"]="Lots of mushrooms, black olives, bell peppers, onions, artichoke hearts, and fresh tomatoes."
    menu["hawaiian"]="Overloaded with juciy pineapple, smoked bacon, sliced ham, roasted red peppers, provolone cheese, and mozzarella cheese on a cheesy Parmesan crust."
    menu["meatLovers"]="Loads of pepperoni, savory Italian sausage, smoked bacon, hamburger, mushrooms, and extra cheese."
    menu["theWorks"]="An irresistible combination of pepperoni, ham, and spicy Italian sausage, fresh-sliced onions and green peppers, gourmet baby portabella mushrooms, and ripe back olives."
    menu["fourCheese"]="Thin-crust pizza with a four-cheese blend of mozzarella, Parmesan, Romano, and Asiago, along with our special seasoning."
    //
     function writeTxt()
      { // shortcut to form
        var food=document.pizzaList;
        // list of radio button elements with name "pizzas".
        var i;
        for(i=0; i<food.pizzas.length; i++)
         {// see if button checked 
           if(food.pizzas[i].checked==true)
             { // write to text area 
               food.pizzaDesc.value=menu[food.pizzas[i].value]; 
               return;
              }
          }   
             food.pizzaDesc.value="Nothing selected";
      }
    //-->
    </script>
    <style type="text/css">
    <!-- 
    .txtA { background-color:#FFF; border:none; font:13px tahoma; color:#3F3F3F; }
    -->
    </style>
    <title>Pizza radio buttons</title>
    </head>
     
    <body>
     
    <script type="text/javascript">
    <!--
    document.write(build);
    //-->
    </script>
    <form name="pizzaList" action method="get">
      <p>Click the buttons for a description of each pizza.</p>
      <p><input type="radio" name="pizzas" value="vegetarian" />Vegetarian<br />
      <input type="radio" name="pizzas" value="hawaiian" />Hawaiian<br />
      <input type="radio" name="pizzas" value="meatLovers" />Meat Lovers<br />
      <input type="radio" name="pizzas" value="theWorks" />The Works<br />
      <input type="radio" name="pizzas" value="fourCheese" />Four Cheese</p>
      <p><input type="button" value="Click for description" onclick="writeTxt()">
      </p>
      <p><textarea class="txtA" name="pizzaDesc" cols="75" rows="20"></textarea></p>
      </form>
     
      </body>
     
      </html>

  6. #6
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And that, to me, makes sense. So I don't know why this book has me doing it completely different.

    I've been over and over the book and made sure everything I had was exactly what the book has. I'll have to ask my instructor for clarification and see if she agrees with the way the book has me go, and I'll bring up your example as well. Thank you!


Bookmarks

Posting Permissions

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