html add action on click of a button

Problem

You are designing a webpage and wish to place a button that does something when you click it. This post we will use a simple HTML code that has a button and when you click it shows a hello popup.

Solution

A simple HTML page with a header (<h3>), a horizontal line (<hr>) and a button (<input>).

<html !DOCTYPE>

	<body>
		<h3>Click the button</h3>
		<hr/>
		<input type="button" value="Click me"/>
	</body>
<html/>

In web design, the way to interact with the user (programmatically) is by using events. There is a list of user events that happen in the web browser, for example when the mouse is over an item, when something is clicked, when a key is pressed, etc. You can have a deep look on events on MDN.

In this case we’re gonna use the onClick event that is executed when the user clicks on an element.

The onClick is an attribute that is added on our button as follows:

<input type="button" value="Click me" onclick="showPopup()" />

The function showPopup() is defined in a <script> tag as follows:


	<script type="text/javascript">
		function showPopup()
		{
			alert('Hello popup');
		}
	</script>

This is added after the <body>. The complete code now looks like this:

<html !DOCTYPE>

	<body>
		<h3>Click the button</h3>
		<hr/>
		<input type="button" value="Click me" onclick="showPopup()" />
	</body>

	<script type="text/javascript">
		function showPopup()
		{
			alert('Hello popup');
		}
	</script>
<html/>

Output

Conclusion

We just saw a very classic and simple user event that connects HTML and JavaScript. Below you can download the complete code

onclick example Download

0 0 votes

Article Rating