In this article we will show you the solution of jQuery onclick call function, here we are going to show you example with the help of onclick attribute. The onclick attribute used to generate click event when selected element clicked by user.
Then value of onclick will initializing or loading that particular method and result will display on webpage whatever defined within this method.
Step By Step Guide On jQuery Onclick Call Function :-
Here we defined html block with h1 tag for heading, button for initialize dis() function call when user clicks on it.
In script block we defined function dis() there we simply displayed text string on alert() method.
The alert() method will help you to display alert message on browsers alert box. If you want to do some other process on dis() method modify it accordingly and you will get result based on it.
<!DOCTYPE html>
<html>
<head>
<title>Onclick Call Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function dis(){
alert("Hi Welcome All..");
}
</script>
</head>
<body>
<h1>To Load Onclick Function Click Button</h1>
<button onclick="dis()">Display</button>
</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.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- 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.
- In script we defined function dis() definition, there we just passed text ‘Hi Welcome All..’ on alert() method to display purpose on webapge.
- In body block we defined h1 heading ‘To Load Onclick Function Click Button’ that help you user to understand exact concept and instruct next move. Button ‘Display’ defined with onclick event with dis() function initialization.
- 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 define onclick call function using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see heading ‘To Load Onclick Function Click Button’, button ‘Display’ now user needs to click on button then you can see the message ‘Hi Welcome All..’ on alert box.
Instead of onclick you can use click event within button element result will be same.
I hope this article on jQuery onclick call function helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
