interactiveElements.js

"use strict";
// This file should be the only one that has top-level code.
// Preinitialization
let result = new UncertainNumber({}); // = 0
// let operation: string = ""
$(document).ready(() => {
    //****************************************************************
    // EVENT LISTENER
    //****************************************************************
    //  $("#operatorSelect input[name='operator']").on("change", function () {
    //    console.log($(this).attr("id")); // Logs the ID of the selected radio button
    //  });
    //****************************************************************
    // SUBMIT button
    //****************************************************************
    $('#submit').on('click', () => {
        console.log("SUBMIT PRESSED");
        // console.log("Selected operation: ", $("#operatorSelect input[name='operator']:checked").attr("id"));
        // Parse both inputs
        let x = $("#xA").val();
        // User types in as % (100x too big) if relative
        let error = $("#errorA").val();
        let isAbsolute = $("#absoluteA").prop("checked");
        const a = UncertainNumber.New({
            x: x,
            error: isAbsolute ? error : (error * 0.01),
            isAbsolute: isAbsolute
        });
        x = $("#xB").val();
        error = $("#errorB").val();
        isAbsolute = $("#absoluteB").prop("checked");
        const b = UncertainNumber.New({
            x: x,
            error: isAbsolute ? error : (error * 0.01),
            isAbsolute: isAbsolute
        });
        console.log("Both UncertainNumber's parsed.");
        // Switch based on  operation selected
        // $("#operatorSelect input[name='operator']").addClass('highlight');
        // Update operation
        /*const operation: string*/ // operation = $("#operatorSelect input[name='operator']:checked").first().attr('id');
        // Find the selected operation.
        // let operation: string = "";
        // Scan each of the 5 radio buttons.
        //    for (const radioButton of $("#operatorSelect input")) {
        //      const id: string = radioButton.attr('id');
        //      const isChecked = radioButton.prop('checked');
        //      console.log("#${id} is checked? ${isChecked}.")
        //      if (isChecked) {
        //        operation = id;
        //        break;
        //      }
        //    }
        if ($("#plus").prop("checked")) {
            result = a.plus(b);
        }
        else if ($("#minus").prop("checked")) {
            result = a.minus(b);
        }
        else if ($("#times").prop("checked")) {
            result = a.times(b);
        }
        else if ($("#divideBy").prop("checked")) {
            result = a.divideBy(b);
        }
        else {
            result = a.raiseTo(b);
        }
        // console.log(operation);
        //    switch (operation) {
        //        case "plus": result = a.plus(b); break;
        //        case "minus": result = a.minus(b); break;
        //        case "times": result = a.times(b); break;
        //        case "divideBy": result = a.divideBy(b); break;
        //        case "raiseTo": result = a.raiseTo(b); break;
        //        default: console.log("Operation switch default");
        //    }
        // Display the answer & extra info
        $('#answer').html(result.toString({ reportAbsolute: true }) + "<br>" + result.toString({ reportAbsolute: false }));
        $('#summary').prepend(result.summary + "<br>");
    });
});
//class jQueryElement {
//  element: any; // The HTML element reference.
//  
//  private constructor(element: any) {
//    this.element = element;
//  }
//
//  // Initialize from id.
//  static fromId(idString: string): jQueryElement {
//    return new this($('#' + idString));
//  }
//
//  // Initialize from class.
//  static fromClass(classString: string): jQueryElement {
//    return new this($('.' + classString));
//  }
//
//  set text(toString: string): void {
//    this.element.text(toString);
//  }
//}
// class ClickableElement {
//   element: any;
//   handleClick: () => void;
//   constructor(jQuerySelection: any, handleClick: () => void = () => {}) {
//     this.element = jQuerySelection;
//     this.handleClick = handleClick;
//   }
//   onClick(): void {
//     this.element.on('click', this.handleClick);
//   }
// }
// new ClickableElement($('#changeColorCheme'), () => {
// }