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 字段中得到输出。我想我在将文本字段放入数组时犯了一个错误。但我不明白，也找不到错误。希望有人能把问题说清楚。

感谢

Answer 1

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

<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>

Answer 2

将字段值转换为数值并在计算结果之前过滤掉 non-numeric 的值（例如，因为它们为空）。如果您为数学创建单独的函数，它也会使事情变得更容易。

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>

javascript 即时计算标准偏差

javascript calculating standard deviation on the fly

html

javascript

standard-deviation