Pass Parameter To JavaScript Function Onclick
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of pass parameter to JavaScript function onclick, here we defined two onclick event functions for pass different type of values passed as parameter which will happen when user clicks on two different buttons.
Using javascript function we generally defined our method then displayed passed parameter value also in general way simply.
Step By Step Guide On Pass Parameter To JavaScript Function Onclick :-
Here we using h1 tag for display heading for program and defined two button elements with onclick event different value’s for load function, access values with different types.
In script we defined function ‘fun()’ with common value of argument then within function fun() we displayed defined argument using alert() method that will opens popup box with value we passed as message.
<!DOCTYPE html>
<html>
<head>
<title>PASS PARAMETER TO FUNCTION ONCLICK</title>
</head>
<body>
<h1>Passed Parameter will Display on AlertBox</h1>
<button onclick="fun('Hello Everyone')">Click</button>
<button onclick="fun('24')">Click</button>
<script>
function fun(value){
alert(value);
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h1 tag with heading ‘Passed Parameter will Display on AlertBox’ and two button elements with onclick event, different values as parameter.
- In first button we declared fun method with string parameter ‘fun('Hello Everyone')’ as onclick event value and in second button we declared fun method with integer parameter ‘fun('24')’ as onclick event value.
- In script we defined function fun() with general parameter ‘value’ it will refers both string, integer parameters as argument.
- Within function we displayed result using alert() method that will opens popup alert box with result as we passed parameter value.
- We can also pass parameter as different values of integers or float or character like any types we can display on alertbox by using this concept.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to pass parameter to function onclick using javascript.
When we executes program on browser we can see the heading ‘Passed Parameter will Display on AlertBox’ message and two buttons ‘Click’ when user clicks on first button alertbox will popup with message as ‘Hello Everyone’ of string parameter and when user clicks on second button alertbox will popup with message as ‘24’ of integer parameter.
I hope this tutorial on pass parameter to JavaScript function onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
