"use strict";

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

    BUT -- while this WORKED for this 2-screener --
    that was because 2nd screen didn't USE any JavaScript.

    So refactoring below to CHECK if getElementById returned
    null before trying to attach attributes to nonexistent
    objects (on 2nd screen)
----*/

window.onload = 
    function()
    {
        // add a form-validation function to 1st screen's form 
        //    (IF on the 1st screen - if there IS a form element
	//    with this id attribute in the just-loaded window)

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

        if (valueForm != null)
	{
            valueForm.onsubmit = allFilled2;

            // since we have 1st screen's form, should have
	    //     first screen's button, too!
            // 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!";
}