OnClick function usage:

js2006

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

Subscribe Post Reply

23937

js2006

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

1,754

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

 
<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

Jul 10 '06 #3

js2006

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

1,754

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

Similar topics

Onclick problem

by: Shock | last post by:

Hello everyone, I am having a problem with the program below. I have isolated the problem to the onclick event that is located throughout arrQuestions. The onclick event refers to a function...

Javascript

[<input type="checkbox">] onSelect vs. onClick

by: F. Da Costa | last post by:

Hi, Does the following indeed imply that this event is NOT called when an <input type="checkbox" is toggled? This would thus imply the usage of the onClick handler instead (assuming an action...

Javascript

Multiple select onclick disable another form field

by: Forti2ude | last post by:

Hello, I have a simple form... <form> <select name="foo" multiple> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>

Javascript

Troubles Rewriting OnClick Event

by: Jamie Jackson | last post by:

I'm rewriting all links' onclick events, but I'm having a problem. The onclick event that I'm inserting works correctly in Opera, but not in FF or IE. I'm retroactively adding the statement...

Javascript

Dynamically adding onclick to element

by: RobG | last post by:

I am trying to dynamically add an onclick to an element, however I just can't get the syntax right. consider the following function: function doClick (evt,x) { // do things with evt and x } ...

Javascript

How to add extra action to onclick event ?

by: abs | last post by:

My element: <span onclick="alert('test')" id="mySpan">test</span> Let's say that I don't know what is in this span's onclick event. Is it possible to add another action to this element's onclick...

Javascript

events get lost (from onBlur to onClick)

by: Heiko Vainsalu | last post by:

Hi Hope somebody knows how to solve this one. *The Situation* A traditional situation where HTML form inputs are checked... (if simplified then it would look something like this) <form...

Javascript

A tag: href vs. onClick

by: usenet | last post by:

See <ul> <li><a name="link1" onClick="alert(this.name);return false;" href="#">Link1</a></li> <li><a name="link2" href="javascript:alert(this);">Link2</a></li> <li>Item 3</li> </ul> ...

Javascript

making onClick dynamic and functional

by: extremerep | last post by:

My task is to change the value of a button and then make it functional with the onClick handler. Changing the value to "Play Again" works, but making the onClick work accordingly does not. The...

Javascript

onClick not firing for an ImageMap Area

by: Dan Rumney | last post by:

All, I have a web page (copied below) with 3 images on it of fixed dimensions. Each image has a map associated with it In the maps, there are a number of areas with an onClick handler...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++