Standard Deviation Calculator in JavaScript

Question

I made a standard deviation calculator but am not sure where I am going wrong in the calculation. I am trying to learn how to manipulate arrays so everything probably takes the long route in what I am doing.

What am I doing wrong?

JavaScript:

myArray = [];
    squaredArray = [];
    var theTotal;
    var average;
    var theSquaredTotal;
    var meanOfSquaredArray;
    var squaredAverage;
    var standardDeviation;
    $(document).ready(function() {
        $('#inTakeButton').on('click', function() {
            var inputValue = parseFloat($('#input').val());
            if (inputValue === "") {
                return;
            }
            if (isNaN(inputValue)) {
                $('#input').val("");
                return;
            }
            myArray.push(inputValue);
            $('#input').val("");
        });
        $('#showArray').on('click', function() {
            console.log(myArray);
            $('#list').html("");
            for (var i = 0; i < myArray.length; i++) {
                $('#list').append("<li>" + myArray[i] + "</ul>");
            };
            $('#doMath').on('click', function() {
                theTotal = 0;
                for (var i = 0; i < myArray.length; i++) {
                    theTotal = theTotal + myArray[i];
                };
                $('#sum').html("");
                $('#sum').html("The sum is: " +
                    theTotal);
                average = parseFloat((theTotal /
                    myArray.length));
                $('#average').html("");
                $('#average').html(
                    "The mean value is: " + average
                );
                for (var i = 0; i < myArray.length; i++) {
                    squaredArray.push(myArray[i] -
                        average);
                };
                console.log(
                    "the subtracted squared away array is: " +
                    squaredArray);
                for (var i = 0; i < myArray.length; i++) {
                    squaredArray[i] = Math.pow(
                        squaredArray[i], 2);
                };
                console.log(
                    "the squared away array is: " +
                    squaredArray);
                for (var i = 0; i < squaredArray.length; i++) {
                    squaredTotal = 0;
                    squaredTotal = squaredTotal +
                        squaredArray[i]
                };
                console.log("The squared sum is: " +
                    squaredTotal);
                //meanOfSquaredArray = 
                squaredAverage = parseFloat((
                    squaredTotal / squaredArray
                    .length));
                console.log("The squared average is: " +
                    squaredAverage);
                standardDeviation = Math.sqrt(
                    squaredAverage);
                console.log(
                    "The standard deviation is: " +
                    standardDeviation);
            });
        });
    });

CSS:

#wrapper {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 10px 3px #000;
    padding: 10px;
}

h1 {
    text-align: center;
    color: orange;
    text-shadow: 1px 1px blue;
}

#intake {
    text-align: center;
}

HTML:

    <div id="wrapper">
        <div id="content">
            <h1>Standard Deviation</h1>
            <div id="intake">
                <input id="input" type="text"> <button id="inTakeButton">Push
                to Array</button> <button id="showArray">Show Array</button>
                <button id="doMath">Do Math</button>
            </div>
            <div id="middle">
                <ul id="list"></ul>
                <ul id="sortedList"></ul>
            </div>
            <div id="output">
                <p id="sorted"></p>
                <p id="sum"></p>
                <p id="average"></p>
            </div>
        </div>
    </div>

Fiddle here.

Answer 1

You have nested two click events:

$('#showArray').on('click', function() {
    //
    $('#doMath').on('click', function() {
        //
    });
});

You should move the click event on #doMath out to stand alone so that it can run when you actually click that element.

Answer 2

It´s quite simple mistake, you are doing

 for (var i = 0; i < squaredArray.length; i++) {
    squaredTotal = 0;
    squaredTotal = squaredTotal + squaredArray[i]
 };

So in each step, you are resetting squaredTotal to 0, which means when the loop ends, squaredTotal will be equal to the last value of the array. Fix is to put it outside the loop:

 squaredTotal = 0;
 for (var i = 0; i < squaredArray.length; i++) {
    squaredTotal = squaredTotal + squaredArray[i]
 };