Tech N Toast®

onclick event in JavaScript

onclick JavaScript

At our homes, we control lots of things using buttons. For example, a bulb, a television set, various smart lights, air conditioner, and other important items. But, what happens in a software world. The world of various types of scripts. We use JavaScript to build responsive and interactive elements. Lots of functions are used while building games, web applications, web servers, smart applications etc. In this post, we are going to discuss onclick

It can be used to display warnings, to validate items, alert boxes, messages, submit form, web page, text etc. 

In simple language, things happen when a button is clicked. 

Please note that the JavaScript is a case-sensitive language. There has to be a consistent capitalization of letters when we use the language keywords, function names, and other identifiers.

=============== Button =================

<input type="button" onclick="neeraj()" value="click here">


button - We are going to use it.

onclick - An HTML event attribute.

neeraj - This is our function name.

click here - Value.



=============== Function =================

function neeraj() { alert("Hello");}


function - This is a keyword.

alert - An alert box.

Hello - The message in the alert box.



=============== HTML file =================

We are going to use a simple HTML file. 

We insert the code between <script> and </script> tags.


<html>
<head>
<title>....write......</title>
<head/>
<body>

<script>

</script>

</body>
</html>

================================

The editor to test the code -  https://www.techntoast.com/2019/11/test-your-html-javascript-and-css-codes.html



Let's add the button  

<html>
<head>
<title>....file name.....</title>
<head/>
<body>

<input type="button" onclick="neeraj()" value="click here">

</body>

</html>


button onclick


Let's call it

<html>
<head>
<title>....name......</title>
<head/>
<body>

<input type="button" onclick="neeraj()" value="Click here">

<script>

function neeraj() {
  alert("awesome things happen in the awesome world");
}

</script>

</body>

</html>


onclick JavaScript button



No comments:
Post a Comment