ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial -


Inserting Text into a Document, using

Choose something you like, by clicking on a radio button:

JavaScript
Ice cream  
Swimming


This text changes


When I click on a radio button the text changes. That is, the words change, and so does the colour and the size of the text.

To make the code work, you must first give each of the three radio buttons the same name, and different IDs. And the paragraph you wish to change should be given a unique ID:


<input type="radio" id="myRadio1" name="C1" value="jav" onclick="modifyText('myRadio1')" />

<br />

Ice cream&nbsp;&nbsp;

<input type="radio" id="myRadio2" name="C1" value="ice" onclick="modifyText('myRadio2')" />

<br />

Swimming

<input type="radio" id="myRadio3" name="C1" value="swim" onclick="modifyText('myRadio3')" />


Each of the radio buttons above has a distinct ID. This ID is used to call the function "modifyText" to make the changes.

The HTML code for the paragraph is:

<p id="myPara1" class="vanilla">This text changes</p>

So far we have completed the code in the BODY section of the page. All that remains is the function and STYLE in the HEAD section. The style is:


<style type="text/css">

<!--

.vanilla{color: #8000FF; font-weight: bold;};

.bluey{color:blue; font-size:30; font-family:monospace };

.reddy{color:red; font-size:24; font-family:fantasy};

.greeny{color:green; font-size:40;font-family:cursive};

-->

</style>


We have defined four classes for the style (one class is the original one for the paragraph, and could be omitted).

Finally, here is the function:


<script type="text/javascript">

<!--

//the code detects which radio button has been checked

//when the user clicks and changes the style and content

//of a paragraph

function modifyText(myRadio)

{

var para = document.getElementById('myPara1');

var theRadioValue=document.getElementById(myRadio);

//The radio buttons with the same name, form an array

//Only one radio button can be checked at a time

if (theRadioValue.id=="myRadio1")

{

//The code below sets the text for the paragraph

//it is similar for each radio button

para.lastChild.nodeValue ="Oh! You like JavaScript, do you?";

para.className="bluey";

}

if (theRadioValue.id=="myRadio2")

{

para.lastChild.nodeValue ="So you like ice cream!";

para.className="reddy";

}

if (theRadioValue.id=="myRadio3")

{

para.lastChild.nodeValue ="So you like to swim!";

para.className="greeny";

}

}

-->

</script>


 

 

[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to