TestButton Example -- Starter Source Code

TestButton Example -- Source Code

HTML Page -- testbutton.htm

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Button Test Example</title>
        <style>
        * { font-family: 'Trebuchet MS', Verdana, sans-serif;
            box-sizing: border-box; }
        body { background-color: #e0e0ff; }
        fieldset {background-color: #d0d0ff; }
            input, button { width: 200px; height: 30px; }
        </style>
    </head>

    <body>
        <h1>Button Test Example</h1>
        <fieldset>
            <legend>Test Event Handler for Button</legend>
            <label for="txt1">Output From Button</label><br>
            <input type="text" id="txt1"><br><br>
            <button id="btn">Click Me</button>
        </fieldset>
    </body>
</html>

JavaScript Page -- clickmescript.js

// Event handler.
function display( ) {
    var textField = document.getElementById("txt1");
    textField.value = "I\'ve been clicked";
}

// Initialization function adds click event 
// handler to button.
function init( ) {
    var button = document.getElementById("btn");
    //button.onclick = display; <-- older style
    button.addEventListener("click", display);
}

// Invoke init method when window loads.
//window.onload = init; <-- older style
window.addEventListener("load", init);