php - Javascript calc函数运行两次的问题

Question

我对 Javascript 相当陌生，我通常在大多数事情上使用 php，但我需要为我的网站进行动态计算，但我在弄清楚它时遇到了一些麻烦。我有一个数字表，每行最多 10 个文本输入字段，每列最多 10 个文本输入字段。我编写了一个函数来计算每行输入的数字的总数，并尝试使用相同的函数来计算列，但它没有显示。您能提供的任何帮助都会很棒。我的代码如下。

function calcTotal(A,B,C,D,E,F,G,H,I,J,SUM) {

  var one = Number(document.getElementById(A).value);

  var two = Number(document.getElementById(B).value);

  var three = Number(document.getElementById(C).value);

  var four = Number(document.getElementById(D).value);

  var five = Number(document.getElementById(E).value);

  var six = Number(document.getElementById(F).value);

  var seven = Number(document.getElementById(G).value);

  var eight = Number(document.getElementById(H).value);

  var nine = Number(document.getElementById(I).value);

  var ten = Number(document.getElementById(J).value);


  var ans = one + two + three + four + five + six + seven + eight + nine + ten;
  document.getElementById(SUM).innerHTML = ans;

}   

echo '<form name"score" class="form-vertical" action="" method="post">';

                echo "<table class='table table-striped table-bordered table-condensed' align='center'>";   
                echo '<tr> <th style="text-align:center; vertical-align:middle;">Roller</th> <th style="text-align:center; vertical-align:middle;">Frame 1</th> <th style="text-align:center; vertical-align:middle;">Frame 2</th> <th style="text-align:center; vertical-align:middle;">Frame 3</th> <th style="text-align:center; vertical-align:middle;">Frame 4</th> <th style="text-align:center; vertical-align:middle;">Frame 5</th> <th style="text-align:center; vertical-align:middle;">Frame 6</th> <th style="text-align:center; vertical-align:middle;">Frame 7</th> <th style="text-align:center; vertical-align:middle;">Frame 8</th> <th style="text-align:center; vertical-align:middle;">Frame 9</th> <th style="text-align:center; vertical-align:middle;">Frame 10</th><th style="text-align:center; vertical-align:middle;">Total</th></tr>';      
                 $i=1;
                while($row = mysql_fetch_assoc($sroll)) {
                echo '<tr>';
                echo '<td style="text-align:center; vertical-align:middle;">'.$row['name'].'</td>'; 
                    echo '<input type="hidden" name="'.$i.'rname" value="'.$row['name'].'"/>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame1" id="'.$i.'f1" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f1\',\'n2f1\',\'nf1\',\'1f1\',\'2f1\',\'3f1\',\'4f1\',\'5f1\',\'6f1\',\'7f1\',\'f1result\')"/></td>';          
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame2" id="'.$i.'f2" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f2\',\'n2f2\',\'nf2\',\'1f2\',\'2f2\',\'3f2\',\'4f2\',\'5f2\',\'6f2\',\'7f2\',\'f2result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame3" id="'.$i.'f3" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f3\',\'n2f3\',\'nf3\',\'1f3\',\'2f3\',\'3f3\',\'4f3\',\'5f3\',\'6f3\',\'7f3\',\'f3result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame4" id="'.$i.'f4" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f4\',\'n2f4\',\'nf4\',\'1f4\',\'2f4\',\'3f4\',\'4f4\',\'5f4\',\'6f4\',\'7f4\',\'f4result\')"/></td>';      
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame5" id="'.$i.'f5" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f5\',\'n2f5\',\'nf5\',\'1f5\',\'2f5\',\'3f5\',\'4f5\',\'5f5\',\'6f5\',\'7f5\',\'f5result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame6" id="'.$i.'f6" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f6\',\'n2f6\',\'nf6\',\'1f6\',\'2f6\',\'3f6\',\'4f6\',\'5f6\',\'6f6\',\'7f6\',\'f6result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame7" id="'.$i.'f7" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f7\',\'n2f7\',\'nf7\',\'1f7\',\'2f7\',\'3f7\',\'4f7\',\'5f7\',\'6f7\',\'7f7\',\'f7result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame8" id="'.$i.'f8" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f8\',\'n2f8\',\'nf8\',\'1f8\',\'2f8\',\'3f8\',\'4f8\',\'5f8\',\'6f8\',\'7f8\',\'f8result\')"/></td>';  
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame9" id="'.$i.'f9" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f9\',\'n2f9\',\'nf9\',\'1f9\',\'2f9\',\'3f9\',\'4f9\',\'5f9\',\'6f9\',\'7f9\',\'f9result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="'.$i.'Frame10" id="'.$i.'f10" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\''.$i.'f1\',\''.$i.'f2\',\''.$i.'f3\',\''.$i.'f4\',\''.$i.'f5\',\''.$i.'f6\',\''.$i.'f7\',\''.$i.'f8\',\''.$i.'f9\',\''.$i.'f10\',\''.$i.'result\'); calcTotal(\'n3f10\',\'n2f10\',\'nf10\',\'1f10\',\'2f10\',\'3f10\',\'4f10\',\'5f10\',\'6f10\',\'7f10\',\'f10result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="'.$i.'result"></div></td>';                    

                echo '</tr>';
                $i++;
                }
                echo '<tr>';
                echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newname" maxlength="30"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame1" id="nf1" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f1\',\'n2f1\',\'nf1\',\'1f1\',\'2f1\',\'3f1\',\'4f1\',\'5f1\',\'6f1\',\'7f1\',\'f1result\')"/></td>'; 
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame2" id="nf2" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f2\',\'n2f2\',\'nf2\',\'1f2\',\'2f2\',\'3f2\',\'4f2\',\'5f2\',\'6f2\',\'7f2\',\'f2result\')"/></td>'; 
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame3" id="nf3" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f3\',\'n2f3\',\'nf3\',\'1f3\',\'2f3\',\'3f3\',\'4f3\',\'5f3\',\'6f3\',\'7f3\',\'f3result\')"/></td>'; 
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame4" id="nf4" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f4\',\'n2f4\',\'nf4\',\'1f4\',\'2f4\',\'3f4\',\'4f4\',\'5f4\',\'6f4\',\'7f4\',\'f4result\')"/></td>';     
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame5" id="nf5" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f5\',\'n2f5\',\'nf5\',\'1f5\',\'2f5\',\'3f5\',\'4f5\',\'5f5\',\'6f5\',\'7f5\',\'f5result\')"/></td>'; 
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame6" id="nf6" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f6\',\'n2f6\',\'nf6\',\'1f6\',\'2f6\',\'3f6\',\'4f6\',\'5f6\',\'6f6\',\'7f6\',\'f6result\')"/></td>';     
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame7" id="nf7" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f7\',\'n2f7\',\'nf7\',\'1f7\',\'2f7\',\'3f7\',\'4f7\',\'5f7\',\'6f7\',\'7f7\',\'f7result\')"/></td>';     
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame8" id="nf8" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f8\',\'n2f8\',\'nf8\',\'1f8\',\'2f8\',\'3f8\',\'4f8\',\'5f8\',\'6f8\',\'7f8\',\'f8result\')"/></td>'; 
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame9" id="nf9" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f9\',\'n2f9\',\'nf9\',\'1f9\',\'2f9\',\'3f9\',\'4f9\',\'5f9\',\'6f9\',\'7f9\',\'f9result\')"/></td>';     
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="newFrame10" id="nf10" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'nf1\',\'nf2\',\'nf3\',\'nf4\',\'nf5\',\'nf6\',\'nf7\',\'nf8\',\'nf9\',\'nf10\',\'nresult\'); calcTotal(\'n3f10\',\'n2f10\',\'nf10\',\'1f10\',\'2f10\',\'3f10\',\'4f10\',\'5f10\',\'6f10\',\'7f10\',\'f10result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="nresult"></div></td>';

                echo '</tr>';
                echo '<tr>';
                echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2name" maxlength="30"/></td>';       
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame1" id="n2f1" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f1\',\'n2f1\',\'nf1\',\'1f1\',\'2f1\',\'3f1\',\'4f1\',\'5f1\',\'6f1\',\'7f1\',\'f1result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame2" id="n2f2" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f2\',\'n2f2\',\'nf2\',\'1f2\',\'2f2\',\'3f2\',\'4f2\',\'5f2\',\'6f2\',\'7f2\',\'f2result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame3" id="n2f3" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f3\',\'n2f3\',\'nf3\',\'1f3\',\'2f3\',\'3f3\',\'4f3\',\'5f3\',\'6f3\',\'7f3\',\'f3result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame4" id="n2f4" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f4\',\'n2f4\',\'nf4\',\'1f4\',\'2f4\',\'3f4\',\'4f4\',\'5f4\',\'6f4\',\'7f4\',\'f4result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame5" id="n2f5" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f5\',\'n2f5\',\'nf5\',\'1f5\',\'2f5\',\'3f5\',\'4f5\',\'5f5\',\'6f5\',\'7f5\',\'f5result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame6" id="n2f6" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f6\',\'n2f6\',\'nf6\',\'1f6\',\'2f6\',\'3f6\',\'4f6\',\'5f6\',\'6f6\',\'7f6\',\'f6result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame7" id="n2f7" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f7\',\'n2f7\',\'nf7\',\'1f7\',\'2f7\',\'3f7\',\'4f7\',\'5f7\',\'6f7\',\'7f7\',\'f7result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame8" id="n2f8" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f8\',\'n2f8\',\'nf8\',\'1f8\',\'2f8\',\'3f8\',\'4f8\',\'5f8\',\'6f8\',\'7f8\',\'f8result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame9" id="n2f9" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f9\',\'n2f9\',\'nf9\',\'1f9\',\'2f9\',\'3f9\',\'4f9\',\'5f9\',\'6f9\',\'7f9\',\'f9result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new2Frame10" id="n2f10" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n2f1\',\'n2f2\',\'n2f3\',\'n2f4\',\'n2f5\',\'n2f6\',\'n2f7\',\'n2f8\',\'n2f9\',\'n2f10\',\'n2result\'); calcTotal(\'n3f10\',\'n2f10\',\'nf10\',\'1f10\',\'2f10\',\'3f10\',\'4f10\',\'5f10\',\'6f10\',\'7f10\',\'f10result\')"/></td>';
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="n2result"></div></td>';

                echo '</tr>';
                echo '<tr>';
                echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3name" maxlength="30"/></td>';       
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame1" id="n3f1" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f1\',\'n2f1\',\'nf1\',\'1f1\',\'2f1\',\'3f1\',\'4f1\',\'5f1\',\'6f1\',\'7f1\',\'f1result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame2" id="n3f2" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f2\',\'n2f2\',\'nf2\',\'1f2\',\'2f2\',\'3f2\',\'4f2\',\'5f2\',\'6f2\',\'7f2\',\'f2result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame3" id="n3f3" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f3\',\'n2f3\',\'nf3\',\'1f3\',\'2f3\',\'3f3\',\'4f3\',\'5f3\',\'6f3\',\'7f3\',\'f3result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame4" id="n3f4" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f4\',\'n2f4\',\'nf4\',\'1f4\',\'2f4\',\'3f4\',\'4f4\',\'5f4\',\'6f4\',\'7f4\',\'f4result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame5" id="n3f5" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f5\',\'n2f5\',\'nf5\',\'1f5\',\'2f5\',\'3f5\',\'4f5\',\'5f5\',\'6f5\',\'7f5\',\'f5result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame6" id="n3f6" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f6\',\'n2f6\',\'nf6\',\'1f6\',\'2f6\',\'3f6\',\'4f6\',\'5f6\',\'6f6\',\'7f6\',\'f6result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame7" id="n3f7" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f7\',\'n2f7\',\'nf7\',\'1f7\',\'2f7\',\'3f7\',\'4f7\',\'5f7\',\'6f7\',\'7f7\',\'f7result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame8" id="n3f8" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f8\',\'n2f8\',\'nf8\',\'1f8\',\'2f8\',\'3f8\',\'4f8\',\'5f8\',\'6f8\',\'7f8\',\'f8result\')"/></td>';    
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame9" id="n3f9" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f9\',\'n2f9\',\'nf9\',\'1f9\',\'2f9\',\'3f9\',\'4f9\',\'5f9\',\'6f9\',\'7f9\',\'f9result\')"/></td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><input class="span12" type="text" name="new3Frame10" id="n3f10" maxlength="2" size="2" onkeypress="validate(event)" onChange="calcTotal(\'n3f1\',\'n3f2\',\'n3f3\',\'n3f4\',\'n3f5\',\'n3f6\',\'n3f7\',\'n3f8\',\'n3f9\',\'n3f10\',\'n3result\'); calcTotal(\'n3f10\',\'n2f10\',\'nf10\',\'1f10\',\'2f10\',\'3f10\',\'4f10\',\'5f10\',\'6f10\',\'7f10\',\'f10result\')"/></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="n3result"></div></td>';

                echo '</tr>';
                echo '<tr>';
                echo '<td style="text-align:center; vertical-align:middle;">Total</td>';        
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f1result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f2result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f3result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f4result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f5result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f6result"></div></td>';       
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f7result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f8result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f9result"></div></td>';   
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="f10result"></div></td>';  
                 echo '<td style="text-align:center; vertical-align:middle;"><div id="totalresult"></div></td>';                    

                echo '</tr>';

                 echo '</table>';
                    echo '<input class="btn btn-primary" type="submit" name="addscore" value="Add Scores with Extras"> ';
                    echo '<input class="btn btn-primary" type="submit" name="addscore2" value="Add Scores without Extras">';
                echo '</form>'; 

Answer 1

您需要将元素的值解析为整数：

在您的函数中执行此操作：

  var one = parseInt(document.getElementById(A).value), 10) || 0;
  var two = parseInt(document.getElementById(B).value, 10) || 0;
  var three = parseInt(document.getElementById(C).value, 10) || 0;
  var four = parseInt(document.getElementById(D).value, 10) || 0;
  var five = parseInt(document.getElementById(E).value, 10) || 0;
  var six = parseInt(document.getElementById(F).value, 10) || 0;
  var seven = parseInt(document.getElementById(G).value, 10) || 0;
  var eight = parseInt(document.getElementById(H).value, 10) || 0;
  var nine = parseInt(document.getElementById(I).value, 10) || 0;
  var ten = parseInt(document.getElementById(J).value, 10) || 0;

Answer 2

一位朋友帮助了我，我在下面提出了解决我的问题的代码。感谢大家的帮助。

function calcTotal(A,B,C,D,E,F,G,H,I,J,SUM) {

  var one = parseInt(document.getElementById(A) ? document.getElementById(A).value : 0, 10) || 0;    
  var two = parseInt(document.getElementById(B) ? document.getElementById(B).value : 0, 10) || 0;    
  var three = parseInt(document.getElementById(C) ? document.getElementById(C).value : 0, 10) || 0;    
  var four = parseInt(document.getElementById(D) ? document.getElementById(D).value : 0, 10) || 0;    
  var five = parseInt(document.getElementById(E) ? document.getElementById(E).value : 0, 10) || 0;    
  var six = parseInt(document.getElementById(F) ? document.getElementById(F).value : 0, 10) || 0;    
  var seven = parseInt(document.getElementById(G) ? document.getElementById(G).value : 0, 10) || 0;    
  var eight = parseInt(document.getElementById(H) ? document.getElementById(H).value : 0, 10) || 0;    
  var nine = parseInt(document.getElementById(I) ? document.getElementById(I).value : 0, 10) || 0;    
  var ten = parseInt(document.getElementById(J) ? document.getElementById(J).value : 0, 10) || 0; 

  var ans = one + two + three + four + five + six + seven + eight + nine + ten;      
  document.getElementById(SUM).innerHTML = ans;    
}