//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>

    // OUTPUT: do something interesting when the button is pressed...
    var mainProcedure = function () {
        /* Javascript code goes in here */
    // INPUT: add an onclick event to the button
    document.getElementById('buttonID').onclick = mainProcedure;

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>
        <meta charset="utf-8">
        <title>//INPUT: Buttons</title>
    <body id="bodyID">
        <h1>Using buttons in Javascript</h1>
        <button id="button1ID">
            Click me!

        <button id="button2ID">
            Click me too!

        <button id="button3ID">
            Click me three!

        <button id="button4ID">
            Click me last!

        <p id="emptyID"></p>  
        <!-- your script is the last thing in your <body> -->
            // define your OUTPUT functions first...
            // OUTPUT: this is triggered by button #1 and inserts text inside emptyID
            var insertHTML = function () {
                // insert text inside an empty HTML element
                    = "I'm now inside the empty paragraph";
            // OUTPUT: this is triggered by button #2 and replaces the button text inside button2ID
            var replaceButton = function () {
                // replace the text inside the button
                    = "I have replaced the button text!";

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

            // OUTPUT: this is triggered by button #4 and replaces the inside of the whole <body></body>
            var replaceBody = function () {
                // replace the entire body with new code
                    = "<h1>Nothing to see here</h1><p>Move along...</p>";

            // attach your INPUTs last...
            // INPUT: attach the insertHTML function to button1ID
            document.getElementById('button1ID').onclick    = insertHTML;
            // INPUT: attach the insertHTML function to button2ID
            document.getElementById('button2ID').onclick    = replaceButton;
            // INPUT: attach the insertHTML function to button3ID
            document.getElementById('button3ID').onclick    = showAlert;
            // INPUT: attach the insertHTML function to button4ID
            document.getElementById('button4ID').onclick    = replaceBody;

The code above produces: