This tutorial not only demonstrates the onClick event handler of a button but also we will learn how to extract a particular button’s name or value properties. So let’s start understanding the concept with the help of an example:
First of all, make three input button on your web page and make a Script tag in your head section to write JavaScript function with the help of below mentioned HTML/JavaScript code:
<html>
<head>
<title>JavaScript Multiple Buttons Share Same Function</title>
<script language="javascript" type="text/javascript">
function testFunction(btn){
if(btn.value == "Football"){
alert("This is Football Team!!!!");
}
if(btn.value == "Cricket"){
alert("This is Cricket Team!!!!");
}
if(btn.value == "Hockey"){
alert("This is Hockey Team!!!!");
}
}
</script>
</head>
<body>
<Form>
<input type="button" value="Football" onClick="testFunction(this)" />
<input type="button" value="Cricket" onClick="testFunction(this)" />
<input type="button" value="Hockey" onClick="testFunction(this)"/>
<Form/>
</body>
</html>
In the above example, each button passes its own object (this keyword) as a parameter to the testFunction() and the function then displays the result with an alert dialog box.
No comments:
Post a Comment
Please do not enter spam links.