OnClick function usage:

js2006 · #1 July 10th, 2006, 06:38 AM

hello guys iam new to javascript so having some problems : please help me solving those:

iam a bit struggling to Develop a web page using JavaScript. so need your a little help guys.

TO DO:

heading:
“Select three different colors”
• Declare three html forms each containing three radio buttons with Red Green Blue.
as shown in the figure given at the end. (User has to select one color from each form)
• Associate an event onClick() with each radio button to check whether the user
selected three different colors or not.
• If user selects three different colors then give him a message alert:
“This is the right selection”
• If user selects repeated colors then give him a message alert:
“Select three different colors”
• Following figures elaborates the whole scenario.

http://xs303.xs.to/xs303/06281/output_01.jpg
http://xs303.xs.to/xs303/06281/output_02.jpg
http://xs303.xs.to/xs303/06281/output_03.jpg

Please reply back the code as simple HTML so i can understand it correctly.

js2006 · #2 July 10th, 2006, 06:39 AM

MY PIECE OF CODE:

something what i have done so far :

<html>

<head>

<title>JavaScript - Event Handling</title>
</head>

<body>

<h1>Select three different colors</h1>

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" width="453" height="187">

<tr>

<td width="348" height="187">

<form method="POST" action="">

<input type="radio" value="V1" name="R1">Red</p>
<input type="radio" value="V2" name="R2">Green</p>
<p><input type="radio" name="R3" value="V3">Blue</p>

</form>

</td>

<td width="482" height="187"><form method="POST" action="">

<input type="radio" value="V4" name="R4">Red</p>
<input type="radio" value="V5" name="R5">Green</p>
<p><input type="radio" name="R6" value="V6">Blue</p>

</form>

</td>

<td width="477" height="187"><form method="POST" action="">

<input type="radio" value="V7" name="R7">Red</p>
<input type="radio" value="V8" name="R8">Green</p>
<p><input type="radio" name="R9" value="V9">Blue</p>
</form>

</td>

</tr>

</table>

</body>

</html>

sashi · #3 July 10th, 2006, 07:44 PM

Hi there,

what you have created is just an HTML form.. where is the javascript functions? take a look at example shown below..

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

<TITLE>Mouse Capture</TITLE>

<SCRIPT>

function action() {

if (event.srcElement.id=='DIV1') DIV1.releaseCapture();

else DIV1.style.backgroundColor=Math.floor(Math.random()*16777216);

}

</SCRIPT>

</HEAD>

<BODY onload="DIV1.setCapture();">

<DIV ID="DIV1" onclick="action();" STYLE="position:absolute;top:10;left:10;height:100;width:200;background-color:red">

</DIV>

</BODY>

</HTML>

below are some links which allows you to understand event handling better.. pls go thru the examples shown.. hope it's helpful and helps you to get started.. good luck my fren.. :)

http://www.quirksmode.org/js/introevents.html
http://webdevelopersjournal.com/arti...jsevents2.html

js2006 · #4 July 11th, 2006, 03:45 AM

how to Apply alert message on three radio buttons of the form above such that when ever more than one is selected a message appears.??

please help me by giving one more related example of above problem

sashi · #5 July 11th, 2006, 10:52 AM

hi there,

give you more related examples? why don't you show us what u have completed as far as now? i expect you to write a simple javacript function to do a little bit of validation magic based on the examples sent to you.. be glad enough that i hsent you some links with example..

always remember.. as i have mentioned in few of my post.. that is.. we are here not to help you to write your program.. instead we help you to validate your code..

p/s look at my signature text..

OnClick function usage:

Popular Articles

What is Bytes?