"use strict";

// trying the Module pattern...?
// (even though this application DOESN'T use any other 
//     JavaScript...)

(function()
 {
     /*---- 
         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!";
    }
})();