JavaScript add more var not working on onkeyup-CodePudding

I want to create a quality control table using javascript, but when I add more than two variables everything stops working, even though I need 20 sequences in the table.

For now, I'm trying with javascript, maybe you can help with other alternatives like using JQuery

JavaScript I use:

function testfunction(){
        var arr = document.getElementsByName('hp');
        var arr2 = document.getElementsByName('sd-sum');
        var v1 = document.getElementById("v_1").value;
        var v2 = document.getElementById("v_2").value;
        /**
        * I want to add more 
        * var v3 = document.getElementById("v_3").value;
        * var v4 = document.getElementById("v_4").value;
        * ............
        * up to 20
        */
        
        var tot=0;
        for(var i=0;i<arr.length;i  ){
            if(parseInt(arr[i].value))
                tot  = parseInt(arr[i].value);
        }
        var tot_sd=0;
        for(var i=0;i<arr2.length;i  ){
            if(parseInt(arr2[i].value))
                tot_sd  = parseInt(arr2[i].value);
        }
        tot_ = document.getElementById('tot_result');
        tot_sdsum = document.getElementById('tot_sd');
        mean_ = document.getElementById('mean');
        sd_ = document.getElementById('SD');
        cv_ = document.getElementById('CV');
        
        mean_all = tot / 20;
        x1_v = mean_all - v1; 
        x2_v = mean_all - v2;
        
        y1_x = Math.pow(x1_v,2).toFixed(2);
        y2_x = Math.pow(x2_v,2).toFixed(2);

        /**     
        * I want to add more 
        * x3_v = mean_all - v3; 
        * x4_v = mean_all - v4;
        * ............
        * up to 20
        */
        
        tot_.innerHTML = tot; 
        mean_.value = mean_all;

        
        document.getElementById("x_1").value = x1_v; 
        document.getElementById("x_2").value = x2_v; 
        
        document.getElementById("y_1").value = y1_x; 
        document.getElementById("y_2").value = y2_x; 
    
        
        /**     
        * I want to add more 
        * document.getElementById("x_3").value = x3_v; 
        * document.getElementById("x_4").value = x4_v; 
        * ............
        * up to 20
        */
        
        tot_sdsum.innerHTML = tot_sd; 
        sd_cal = (tot_sd / 19).toFixed(2);
        sd_.value = sd_cal ;
        cv_.value =(sd_cal / mean_all * 100).toFixed(2);
    };
    
   document.addEventListener("DOMContentLoaded", function(event) {
       testfunction();
    });

and HTML

<table >
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Test</th>
      <th scope="col">X&#772;-X</th>
      <th scope="col">(X&#772;-X)<sup>2</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><input type="number" id="v_1"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_1" ></td>
      <td><input type="number" id="y_1"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>2</th>
      <td><input type="number" id="v_2"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_2" ></td>
      <td><input type="number" id="y_2"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>3</th>
      <td><input type="number" id="v_4"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_4" ></td>
      <td><input type="number" id="y_4"  name="sd-sum"></td>
    </tr>

<!-- * I want to add more .... up to 20 -->

    <tr>
      <th>n = 20</th>
      <td>&Sigma; <span id="tot_result"></span></td>
      <td>-</td>
      <td>&Sigma; <span id="tot_sd"></span></td>
    </tr>
  </tbody>
</table>

<table >
  <tbody>
    <tr>
      <th>Mean</th>
      <td><input type="number" id="mean" ></td>
    </tr>
    <tr>
      <th>SD</th>
      <td><input type="number" id="SD" ></td>
    </tr>
    <tr>
      <th>CV</th>
      <td><input type="number" id="CV" ></td>
    </tr>
  </tbody>
</table>

Any help would be appreciated.

CodePudding user response：

Instead of storing values in individual variables you can use array. I have created a JSFiddle for your reference : https://jsfiddle.net/dt1m9oc8/19/

HTML:

<html>

<body>
  <table >
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Test</th>
      <th scope="col">X&#772;-X</th>
      <th scope="col">(X&#772;-X)<sup>2</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><input type="number" id="v_1"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_1" ></td>
      <td><input type="number" id="y_1"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>2</th>
      <td><input type="number" id="v_2"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_2" ></td>
      <td><input type="number" id="y_2"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>3</th>
      <td><input type="number" id="v_3"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_3" ></td>
      <td><input type="number" id="y_3"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>4</th>
      <td><input type="number" id="v_4"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_4" ></td>
      <td><input type="number" id="y_4"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>5</th>
      <td><input type="number" id="v_5"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_5" ></td>
      <td><input type="number" id="y_5"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>6</th>
      <td><input type="number" id="v_6"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_6" ></td>
      <td><input type="number" id="y_6"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>7</th>
      <td><input type="number" id="v_7"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_7" ></td>
      <td><input type="number" id="y_7"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>8</th>
      <td><input type="number" id="v_8"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_8" ></td>
      <td><input type="number" id="y_8"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>9</th>
      <td><input type="number" id="v_9"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_9" ></td>
      <td><input type="number" id="y_9"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>10</th>
      <td><input type="number" id="v_10"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_10" ></td>
      <td><input type="number" id="y_10"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>11</th>
      <td><input type="number" id="v_11"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_11" ></td>
      <td><input type="number" id="y_11"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>12</th>
      <td><input type="number" id="v_12"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_12" ></td>
      <td><input type="number" id="y_12"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>13</th>
      <td><input type="number" id="v_13"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_13" ></td>
      <td><input type="number" id="y_13"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>14</th>
      <td><input type="number" id="v_14"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_14" ></td>
      <td><input type="number" id="y_14"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>15</th>
      <td><input type="number" id="v_15"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_15" ></td>
      <td><input type="number" id="y_15"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>16</th>
      <td><input type="number" id="v_16"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_16" ></td>
      <td><input type="number" id="y_16"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>17</th>
      <td><input type="number" id="v_17"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_17" ></td>
      <td><input type="number" id="y_17"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>18</th>
      <td><input type="number" id="v_18"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_18" ></td>
      <td><input type="number" id="y_18"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>19</th>
      <td><input type="number" id="v_19"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_19" ></td>
      <td><input type="number" id="y_19"  name="sd-sum"></td>
    </tr>
    <tr>
      <th>20</th>
      <td><input type="number" id="v_20"  name="hp" onkeyup="testfunction()"></td>
      <td><input type="number" id="x_20" ></td>
      <td><input type="number" id="y_20"  name="sd-sum"></td>
    </tr>
 
    <tr>
      <th>n = 20</th>
      <td>&Sigma; <span id="tot_result"></span></td>
      <td>-</td>
      <td>&Sigma; <span id="tot_sd"></span></td>
    </tr>
  </tbody>
</table>

<table >
  <tbody>
    <tr>
      <th>Mean</th>
      <td><input type="number" id="mean" ></td>
    </tr>
    <tr>
      <th>SD</th>
      <td><input type="number" id="SD" ></td>
    </tr>
    <tr>
      <th>CV</th>
      <td><input type="number" id="CV" ></td>
    </tr>
  </tbody>
</table>
</body>
</html>

JS:

function testfunction(){
                let noOfRows = 20
        var arr = document.getElementsByName('hp');
        var arr2 = document.getElementsByName('sd-sum');
        let v_values = []
        for(let i=1;i<=noOfRows;i  ){
            v_values[i] = document.getElementById(`v_${i}`).value;
        }
         
        let tot=0;
        for(var i=1;i<v_values.length;i  ){
            if(parseInt(v_values[i]))
                tot  = parseInt(v_values[i]);
        }
        var tot_sd=0;
        for(var i=0;i<arr2.length;i  ){
            if(parseInt(arr2[i].value))
                tot_sd  = parseInt(arr2[i].value);
        }
        tot_ = document.getElementById('tot_result');
        tot_sdsum = document.getElementById('tot_sd');
        mean_ = document.getElementById('mean');
        sd_ = document.getElementById('SD');
        cv_ = document.getElementById('CV');
        
        mean_all = tot / noOfRows
        
        let x_v_values = []
        for(let i=1;i<=noOfRows;i  ){
            x_v_values[i] = mean_all - v_values[i]
        }
        let y_x_values = []
        for(let i=1;i<=noOfRows;i  ){
            y_x_values[i] = Math.pow(x_v_values[i],2).toFixed(2);
        }
        
        tot_.innerHTML = tot; 
        mean_.value = mean_all;

        
        for(let i=1;i<=noOfRows;i  ){
            document.getElementById(`x_${i}`).value = x_v_values[i]; 
          document.getElementById(`y_${i}`).value = y_x_values[i]; 
        }
        
        tot_sdsum.innerHTML = tot_sd; 
        sd_cal = (tot_sd / 19).toFixed(2);
        sd_.value = sd_cal ;
        cv_.value =(sd_cal / mean_all * 100).toFixed(2);
    };
    
   document.addEventListener("DOMContentLoaded", function(event) {
       testfunction();
    });