"use strict";

/*-----
    add handlers to form and button AFTER page is 
        loaded
----*/

// [are you worried about this being put BEFORE the
//     definitions of the handlers being added?
//     ...JavaScript DOES permit this; BUT I *think* okay
//     if you prefer to put definitions for allFilled2 and
//     doSomething before this;]

window.onload = 
    function()
    {
        // add a form-validation function to form

        var valueForm = 
            document.getElementById("valueForm");

        // remember: set to function, NOT to result of
        //     CALLING that function;

        valueForm.onsubmit = allFilled2;

        // add a button-action function to button

        var testButton = document.getElementById("test");
        testButton.onclick = doSomething;               
    };

/*-----
    signature: allFilled2: void -> Boolean
    purpose: expects nothing, returns true if
        the three textfields in three-value-form3.php
        have values and the 2nd textfield has a
        numeric value;
        otherwise, it returns false AND complains
        in a NEWLY-ADDED errors paragraph

    by: Sharon Tuttle
    last modified: 2016-04-15
-----*/

function allFilled2()
{
    // get the DOM object for the document's body element

    var bodyObjectArray = 
        document.getElementsByTagName("body");
    var bodyObject = bodyObjectArray[0];

    // get the textfields

    var value1Field = document.getElementById("value1");
    var value2Field = document.getElementById("value2");
    var value3Field = document.getElementById("value3");

    // for convenience/less confusion, grab the current
    //     value attributes for these 3 textfield

    var val1 = value1Field.value;
    var val2 = value2Field.value;
    var val3 = value3Field.value;

    var result = true;

    // create an errors paragraph unless one already
    //    exists

    var errorsPara = document.getElementById("errors");

    // if the above returned anything -- if thus error
    //   p element currently exists -- I hope it will
    //   be "truthy" here

    if (errorsPara)
    {
        // clear out its current contents

        errorsPara.innerHTML = "";

        // removing it from document until I see if
        //    I need it again

        bodyObject.removeChild(errorsPara);
    }

    // if I reach here, I should create this paragraph,
    //     just in case:

    else
    {
        errorsPara = document.createElement("p");

        // I have a CSS rule to style the element
        //    with id="errors", which I would like
        //    to use for this paragraph

        errorsPara.id = "errors";
    }

    // complain and return false if any fields are empty

    if ( (! val1.trim() ) || (! val2.trim() ) ||
         (! val3.trim() ) )
    {
        errorsPara.innerHTML = "MUST fill in ALL "
            +  "textfields before submit! (white space "
            +  "won't do)";
        result = false;
    }

    // if all fields are filled (with something non-white-
    //     space), then make sure 2nd field is numeric

    // some JavaScript functions:
    //    isNaN - returns true if its argument is 
    //            not a number
    //    parseFloat - expects a string, tries to
    //            return the corresponding floating-point
    //            number

    else if (isNaN(parseFloat(val2))
             ||
            (parseFloat(val2) != val2))
    {
        errorsPara.innerHTML = "2nd textfield MUST contain "
                               + "ONLY a number!";
        result = false;
    }

    // only add the errors paragraph if result is false

    if (result === false)
    {
        // get the DOM object for the form

        var formObject = document.getElementById("valueForm");

        // let's add the error paragraph as a child of
        //    body before the form

        bodyObject.insertBefore(errorsPara, formObject);
    }

    return result;
}

/*----
    function: doSomething: void -> void
    purpose: expects nothing, returns nothing,
        but changes value attribute of the element
        with id="value1" to:
CHANGED ya!
-----*/

function doSomething()
{
    var desiredElement = document.getElementById("value1");
    desiredElement.value = "CHANGED ya!";
}