Web Button Example

In this example we will cover how to create a simple web button for web. It is just for showing how to add a button element and listen to the click event happening when users clicks on it. For that, we are going to use alert feature to show how button behaves.

In this example we will need only two files, because we are not going to use any styles from .css.

In our starting point, index.html file we need to put header, text beneath the header and in the end our button element:

The second feature that we need to add is the functionality of the button that goes in to app.js file, that we have added in the <script> tag in our previously created index.html file. This links both of the files. For this example we are going to bind the button using the id of it with getElementById() function. In our case that is myButton. After that, we are going to call .addEventListener() function. We need to pass the action to it, and thats “click” and what we want our button to do after it has been clicked. For that we pass a function that we are creating separately  from the button listener. As a bonus, we add console.log(‘message’) to show in our console (F12 for Chrome users) that our code works for testing