//INPUT: Buttons

<New code>

//INPUT HTML: <button id="buttonId">Button label</button>
— displays a button:

//INPUT JS: document.getElementById('buttonId').onclick = clickyFunction;
— attaches clickyFunction(); to the button with buttonId
— you have to define clickyFunction(); previously in your program

Don't touch the big red button

Buttons are pretty handy in web pages. They are often used as triggers to start things.

They can start a game playing, rewind a video, calculate math, send a text, and so on.

Buttons trigger things when clicked.

In the web universe, if you want to make a button, you do it like this:
<button type="button">Click me!</button>

That makes this:

But click on it: nothing happens.

Assigning an onclick action

In order to make something happen, we have to give the button an ID, and then use Javascript to add a click action to that ID. Like this:

<button type="button" id="buttonId">Click me now!</button>

<script>
    // OUTPUT: do something interesting when the button is pressed...
    var mainProcedure = function () {
	    alert( "Aw - how disappointing - just an alert()..." );
    }
    
    // INPUT: add an onclick event to the button
    document.getElementById('buttonId').onclick = mainProcedure;
</script>

Now when you click this button it will trigger mainProcedure():

And as you guessed, all sorts of functions can be triggered by onclick actions.

Buttons can be styled using CSS by giving them an ID:

Code example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>//INPUT: Buttons</title>
    </head>
    
    <body id="bodyId">
        <h1>Using buttons in Javascript</h1>
        <button id="insertButtonId">
            Click me!
        </button>

        <button id="replaceButtonId">
            Click me too!
        </button>

        <button id="alertButtonId">
            Click me three!
        </button>

        <button id="replaceBodyId">
            Click me last!
        </button>

        <p id="emptyId"></p>  
        
        <!-- your script is the last thing in your <body> -->
        
        <script>
            // define your OUTPUT functions first...
            
            // OUTPUT: this is triggered by button #insertButtonId 
            //          and inserts text inside emptyId
            var insertHTML = function () {
                var newText = "I'm now inside the empty paragraph";

                // insert text inside an empty HTML element
                document.getElementById( "emptyId" ).innerHTML = newText;
            }
            
            // OUTPUT: this is triggered by button #replaceButtonId 
            //          and replaces the button text inside #replaceButtonId 
            var replaceButton = function () {
                var newText = "I have replaced the button text!";

                // replace the text inside the button
                document.getElementById( "replaceButtonId" ).innerHTML = newText;
            }

            // OUTPUT: this is triggered by button #alertButtonId and triggers an alert
            var showAlert = function () {
                // triggered an alert
                alert( "I made an alert()!" );
            }

            // OUTPUT: this is triggered by button #replaceBodyId 
            //          and replaces the inside everything inside #bodyId
            var replaceBody = function () {
                var newText = "<h1>Nothing to see here</h1><p>Move along...</p>";

                // replace the entire body with new code
                document.getElementById( "bodyId" ).innerHTML = newText;
            }

            // attach your INPUTs last...
            // INPUT: attach the insertHTML function to insertButtonId
            document.getElementById( 'insertButtonId' ).onclick     = insertHTML;
            
            // INPUT: attach the replaceButton function to replaceButtonId
            document.getElementById( 'replaceButtonId' ).onclick    = replaceButton;
            
            // INPUT: attach the showAlert function to alertButtonId
            document.getElementById( 'alertButtonId' ).onclick      = showAlert;
            
            // INPUT: attach the replaceBody function to replaceBodyId
            document.getElementById( 'replaceBodyId' ).onclick      = replaceBody;
        </script>
    </body>
</html>

The code above produces: