JavaScript即时计算标准偏差

Question

我有一些html输入字段，其中名称=“ textfield”。 对于这些输入字段，我想即时计算标准偏差，并将其放入HTML输入字段中。

对于计算，我正在使用此JavaScript代码。

    <script type="text/javascript">
        function doSum() {
            var fields = document.getElementsByName("textfield");
            var sum = 0;
            for (var i=0; i<fields.length; i++) {
                var v = parseInt(fields[i].value, 10);
                if (isNaN(v)) v = 0;
                sum += v;
            }
            
            document.getElementById("ergebnis").value = sum;
            
        }
        </script>       
        
        <script>
        // Javascript program to calculate the standered deviation of an array
        function dostd(){
            // Get all buttons as a NodeList    
            var btns = document.querySelectorAll('[textfield]'); 
            // Convert buttons NodeList to an array
            var btnsArr = Array.prototype.slice.call(btns); 
            let arr = btnsArr.map((b) => {return b.value})          
            // Creating the mean with Array.reduce
            let mean = arr.reduce((acc, curr)=>{
            return acc + curr
            }, 0) / btnsArr.length;
           
          // Assigning (value - mean) ^ 2 to every array item
          arr = arr.map((k)=>{
            return (k - mean) ** 2
          })
           
          // Calculating the sum of updated array
         let sum1 = arr.reduce((acc, curr)=> acc + curr, 0);
          
         // Calculating the variance
         let variance = sum1 / arr.length;
          
         // Returning the Standered deviation
         sum1 = Math.sqrt(sum1 / arr.length);
        document.getElementById("ergebnis1").value = sum1;
        }
        
        </script>
        

<form name="form1" method="post" action="">         
        <table>
            <tr>
                <th>Messwert 1</th>
                <th><input type="text" name="textfield" id="breite_mess1" onChange="doSum();dostd();"></th>
            </tr>
            <tr>
                <th>Messwert 2</th>
                <th><input type="text" name="textfield" id="breite_mess2" onChange="doSum();dostd();"></th>
            </tr>
        </table>        
</form>     

        <?php           
        if(isset($_POST['submitcct']))
        {

        require("artikel_info_ziehen.php");     
        
        if ($result1->num_rows > 0) {
            $row = $result1->fetch_assoc();

        echo"<form name='Formular'>";           
        echo"<table>";
        echo"<p>Nennmaß (mm): " . $row["Breitemm"]. " </p>";
        echo"<p>Toleranz(±) (mm): " . $row["ToleranzBreitmm"]. "</p>";
        echo"<p>Mittelwert (mm):<input type='text' id='ergebnis' disabled></p>  ";
        echo"<p>Standardabweichung (mm):<input  type='text' id='ergebnis1' disabled></input>";
        echo"</table>";     
        echo"</form>";  
        
                } else {
            echo "0 results";
        }   
        
        }
        ?>  
        </script>

第二部分只是按下另一个按钮。

但是我没有在HTML字段中获得输出。我认为我犯了一个错误，将Textfield放入数组中。 但是我没有得到它，找不到错误。 我希望有人可以澄清这个问题。

谢谢

Answer 1

接受的答案无法正确计算差异和标准偏差。它需要将平方的总和除以n（或n-1）。

校正的计算方差代码：

const variance = arr => {
    const m = mean(arr);
    return (sum(arr.map(v => (v - m) ** 2)) / arr.length);
};

我没有评论的声誉，因此将其作为单独的答案发布。

Answer 2

在计算结果之前，将字段值转换为数字值，并过滤出非数字的值（例如它们是空的）。如果您为数学创建单独的功能，它也将使事情变得容易。

const sum = arr => arr.reduce((partialSum, a) => partialSum + a, 0);
const mean = arr => sum(arr) / arr.length;
const variance = arr => {
  const m = mean(arr);
  return sum(arr.map(v => (v - m) ** 2));
};
const sd = arr => Math.sqrt(variance(arr));

function dostd() {
  const values = [...document.querySelectorAll('[name="textfield"]')]
    .map(b => parseFloat(b.value))
    .filter(v => !isNaN(v));
  document.getElementById("ergebnis1").value = sd(values);
}

<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<textarea id="ergebnis1" ></textarea>   
<button onclick="dostd()">Check</button>

Answer 3

USE以下代码。它对我有用。
您的共享代码在语法方面不完整。

<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<input name="textfield" />
<textarea id="ergebnis1" ></textarea>   
<button onclick="dostd()">Check</button>
<script>       
    function dostd(){ 
// YOu should select by name as follows. Using name="value"  
        var btns = document.querySelectorAll('[name="textfield"]'); 
      
        var btnsArr = Array.prototype.slice.call(btns); //Array.prototype.slice.call(btns);         
       // THis array init was missed in you code
        let arr = btnsArr.map((b) => {return b.value})

        let mean = arr.reduce((acc, curr)=>{
            return acc + curr
        }, 0) / btnsArr.length;           
       
        arr = arr.map((k)=>{
            return (k - mean) ** 2
        })
       
         let sum1 = arr.reduce((acc, curr)=> acc + curr, 0);
                  
         let variance = sum1 / arr.length;
          
         sum1 = Math.sqrt(sum1 / arr.length);
        document.getElementById("ergebnis1").value = sum1;
    }        
</script>