HTML - on click event do something

In HTML, every tag has an onclick event attribute. When users click on a tag that has onclick event attribute, you browser will fire up the function that is associated to it. Here is an example how to use the onclick event attribute. The code below will call onClickDo() function when the user click on a button. It will add an input field for you to enter your firstname.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML - onClick do something</title>
 
        <script>
            function onClickDo() {
                // Add an input text field.
                document.getElementById("hidden-input").innerHTML = 
                                            '<input type="text" name="firstname">';
            }
        </script>
 
    </head>
    <body>
 
        <button onclick="onClickDo()">Click me to input your firstname</button>
        <div id="hidden-input"></div>
 
    </body>
</html>

Here is a video showing the code above in action.

HTML

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.