Calculating Standard Deviation with JavaScript showing NaN in Textfield

July 4, 2022

so i want to calculate the standard deviation of 10 values from input types.
I am collecting them into an array and want to calculate my standard deviation.

Problem is, it always shows NaN when i run the function (with action "oninput")

My code is the following:

function s10() {

                    var n1 = parseFloat(document.getElementById('input1').value);
                    var n2 = parseFloat(document.getElementById('input2').value);
                    var n3 = parseFloat(document.getElementById('input3').value);
                    var n4 = parseFloat(document.getElementById('input4').value);
                    var n5 = parseFloat(document.getElementById('input5').value);
                    var n6 = parseFloat(document.getElementById('input6').value);
                    var n7 = parseFloat(document.getElementById('input7').value);
                    var n8 = parseFloat(document.getElementById('input8').value);
                    var n9 = parseFloat(document.getElementById('input9').value);
                    var n10 = parseFloat(document.getElementById('input10').value);

                    var arr = [{
                        key: 'n1',
                        value: parseFloat(document.getElementById('input1').value)
                    }, {
                        key: 'n2',
                        value: parseFloat(document.getElementById('input2').value)
                    }, {
                        key: 'n3',
                        value: parseFloat(document.getElementById('input3').value)
                    }, {
                        key: 'n4',
                        value: parseFloat(document.getElementById('input4').value)
                    }, {
                        key: 'n5',
                        value: parseFloat(document.getElementById('input5').value)
                    }, {
                        key: 'n6',
                        value: parseFloat(document.getElementById('input6').value)
                    }, {
                        key: 'n7',
                        value: parseFloat(document.getElementById('input7').value)
                    }, {
                        key: 'n8',
                        value: parseFloat(document.getElementById('input8').value)
                    }, {
                        key: 'n9',
                        value: parseFloat(document.getElementById('input9').value)
                    }, {
                        key: 'n10',
                        value: parseFloat(document.getElementById('input10').value)
                    }, ];

                    const mean = arr.reduce((s, n) => s + n) / arr.length;
                    const variance = arr.reduce((s, n) => s + (n - mean) ** 2, 0) / (arr.length - 1);
                    document.getElementById('s').value = Math.sqrt(variance);
                }

<input type="text" id="input1"/>
<input type="text" id="input2"/>
<input type="text" id="input3"/>
<input type="text" id="input4"/>
<input type="text" id="input5"/>
<input type="text" id="input6"/>
<input type="text" id="input7" />
<input type="text" id="input8" />
<input type="text" id="input9" />
<input type="text" id="input10" oninput="s10();" />
<input type="text" id="s" placeholder="standardDeviation" />

>Solution :

Below is a modified example of your code. A couple of notes:

When calculating the mean and variance, you were using n in the reduce callbacks, rather than n.value
The first reduce function needed an initial value of 0
I used number type inputs to make it easier to step through values
n.value || 0 will use 0 when the input is empty to prevent errors during addition

<script>
  function s10() {
    var n1 = parseFloat(document.getElementById("input1").value);
    var n2 = parseFloat(document.getElementById("input2").value);
    var n3 = parseFloat(document.getElementById("input3").value);
    var n4 = parseFloat(document.getElementById("input4").value);
    var n5 = parseFloat(document.getElementById("input5").value);
    var n6 = parseFloat(document.getElementById("input6").value);
    var n7 = parseFloat(document.getElementById("input7").value);
    var n8 = parseFloat(document.getElementById("input8").value);
    var n9 = parseFloat(document.getElementById("input9").value);
    var n10 = parseFloat(document.getElementById("input10").value);

    var arr = [
      {
        key: "n1",
        value: parseFloat(document.getElementById("input1").value),
      },
      {
        key: "n2",
        value: parseFloat(document.getElementById("input2").value),
      },
      {
        key: "n3",
        value: parseFloat(document.getElementById("input3").value),
      },
      {
        key: "n4",
        value: parseFloat(document.getElementById("input4").value),
      },
      {
        key: "n5",
        value: parseFloat(document.getElementById("input5").value),
      },
      {
        key: "n6",
        value: parseFloat(document.getElementById("input6").value),
      },
      {
        key: "n7",
        value: parseFloat(document.getElementById("input7").value),
      },
      {
        key: "n8",
        value: parseFloat(document.getElementById("input8").value),
      },
      {
        key: "n9",
        value: parseFloat(document.getElementById("input9").value),
      },
      {
        key: "n10",
        value: parseFloat(document.getElementById("input10").value),
      },
    ];

    const mean = arr.reduce((s, n) => s + (n.value || 0), 0) / arr.length;
    const variance = arr.reduce((s, n) => s + ((n.value || 0) - mean) ** 2, 0) / (arr.length - 1);
    document.getElementById("s").value = Math.sqrt(variance);
  }
</script>
<input type="number" id="input1" />
<input type="number" id="input2" />
<input type="number" id="input3" />
<input type="number" id="input4" />
<input type="number" id="input5" />
<input type="number" id="input6" />
<input type="number" id="input7" />
<input type="number" id="input8" />
<input type="number" id="input9" />
<input type="number" id="input10" oninput="s10();" placeholder="Type here" />
<input type="text" id="s" placeholder="standardDeviation" />