467,888 Members | 1,612 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,888 developers. It's quick & easy.

OnClick function usage:

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.
Jul 10 '06 #1
  • viewed: 23761
Share:
4 Replies
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>
Jul 10 '06 #2
sashi
Expert 1GB
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
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Mouse Capture</TITLE>
  4. <SCRIPT>
  5. function action() {
  6. if (event.srcElement.id=='DIV1') DIV1.releaseCapture();
  7. else DIV1.style.backgroundColor=Math.floor(Math.random()*16777216);
  8. }
  9. </SCRIPT>
  10. </HEAD>
  11. <BODY onload="DIV1.setCapture();">
  12. <DIV ID="DIV1" onclick="action();" STYLE="position:absolute;top:10;left:10;height:100;width:200;background-color:red">
  13. </DIV>
  14. </BODY>
  15. </HTML>
  16.  
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
Jul 10 '06 #3
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
Jul 11 '06 #4
sashi
Expert 1GB
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..
Jul 11 '06 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by Shock | last post: by
3 posts views Thread by F. Da Costa | last post: by
3 posts views Thread by Jamie Jackson | last post: by
2 posts views Thread by RobG | last post: by
2 posts views Thread by Heiko Vainsalu | last post: by
53 posts views Thread by usenet | last post: by
7 posts views Thread by extremerep | last post: by
8 posts views Thread by Dan Rumney | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.