New to JavaScript...help please? :)

JavaScript
1

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

If your page is running in XHTML you would need to use

document.forms['pizzaList']
3

So would it look like this? Thank you for your help! :slight_smile:

<input type=“radio” name=“pizzas” onclick=“document.forms[‘pizzaList’].pizzaDesc.value=vegetarian” />

4

No problem

5

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.

[HIGHLIGHT=“”]
<!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 \/>
';
build+='and receive a free Caesar salad<br \/>
';
build+='and two liters of Diet Pepsi!<\/p>
';
//
// 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

And that, to me, makes sense. So I don’t know why this book has me doing it completely different. :frowning:

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!