用于输入文本自动计算的Javascript数组
[英]Javascript Array for input text auto calculation
问题描述
我想为多个输入字段创建一个用于自动计算的数组。 问题是，自动计算的工作原理与第一行的魅力相同，但不适用于第二和第三行。 我想要15行。
任何帮助，将不胜感激。
<html> <head> <script type="text/javascript"> function calc(){ var textValue10 = document.getElementById('input10').value; var textValue9 = document.getElementById('input9').value; var textValue8 = document.getElementById('input8').value; var textValue7 = document.getElementById('input7').value; var textValue6 = document.getElementById('input6').value; var textValue5 = document.getElementById('input5').value; var textValue4 = document.getElementById('input4').value; var textValue3 = document.getElementById('input3').value; var textValue2 = document.getElementById('input2').value; var textValue1 = document.getElementById('input1').value; document.getElementById('output').value = (textValue10*10) + (textValue9*9) + (textValue8*8) + (textValue7*7) + (textValue6*6) + (textValue5*5) + (textValue4*4) + (textValue3*3) + (textValue2*2) + (textValue1*1); } </script> </head> <body> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br> <input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value=""> <input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value=""> <input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value=""> <input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value=""> <input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value=""> <input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output" size="16" onkeyup="calc()" value=""> <br> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br> <input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value=""> <input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value=""> <input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value=""> <input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value=""> <input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value=""> <input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output" size="16" onkeyup="calc()" value=""> <br> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL<br> <input type="text" name="input10" id="input10" size="8" onkeyup="calc()"value=""> <input type="text" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" name="input8" id="input8" size="8" onkeyup="calc()"value=""> <input type="text" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" name="input6" id="input6" size="8" onkeyup="calc()"value=""> <input type="text" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" name="input4" id="input4" size="8" onkeyup="calc()"value=""> <input type="text" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" name="input2" id="input2" size="8" onkeyup="calc()"value=""> <input type="text" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output" size="16" onkeyup="calc()" value=""> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2018-04-01 08:36:32
问题很简单，HTML元素只能有一个唯一的id 。 您为多个元素指定了相同的ID。
Javascript getElementById方法将仅选择具有给定id第一个元素，而忽略其余元素。
这就是为什么您的第一行像护身符和休息符一样被忽略的原因。
为每个元素尝试不同的ID。 或在为每行分配一个唯一的类时使用getElementsByClassName方法。
<html> <head> <script type="text/javascript"> function calc() { var row1 = document.getElementsByClassName('row1'); var row2 = document.getElementsByClassName('row2'); var row3 = document.getElementsByClassName('row3'); document.getElementById('output1').value= clacARow(row1); document.getElementById('output2').value = clacARow(row2); document.getElementById('output3').value = clacARow(row3); } function clacARow(row){ var output = 0; for(var i=0; i<row.length;i++){ var value = (row[i].value)*(row.length-i); console.log(i) if(value){ output = output + value; } } console.log(output); return output; } </script> </head> <body> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL <br> <input type="text" class="row1" name="input10" id="input10" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input8" id="input8" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input6" id="input6" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input4" id="input4" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input2" id="input2" size="8" onkeyup="calc()" value=""> <input type="text" class="row1" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output1" size="16" onkeyup="calc()" disabled="disabled" value=""> <br> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL <br> <input type="text" class="row2" name="input10" id="input10" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input8" id="input8" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input6" id="input6" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input4" id="input4" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input2" id="input2" size="8" onkeyup="calc()" value=""> <input type="text" class="row2" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output2" size="16" disabled="disabled" onkeyup="calc()" value=""> <br> 10                              9                        8                      7                    6                   5                    4                    3                   2                   1                 TOTAL <br> <input type="text" class="row3" name="input10" id="input10" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input9" id="input9" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input8" id="input8" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input7" id="input7" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input6" id="input6" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input5" id="input5" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input4" id="input4" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input3" id="input3" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input2" id="input2" size="8" onkeyup="calc()" value=""> <input type="text" class="row3" name="input1" id="input1" size="8" onkeyup="calc()" value=""> <input type="text" name="output" id="output3" size="16" disabled="disabled" onkeyup="calc()" value=""> </body> </html>
解决方案2
0 2018-04-01 09:07:00
您可以使用DOM的querySelectorAll来动态完成计算。
function calc(rowNumber){ var cells = document.querySelectorAll("#table tr:nth-child("+(rowNumber+2)+") td"); var sum = 0; for (var i = 0; i < cells.length; i++) { var val = parseFloat(cells[i].firstChild.value) * (10 - i); if (!isNaN(val)) { sum+=val; } } cells[10].firstChild.value = sum; }
<table id="table"> <tr> <td>10</td> <td>9</td> <td>8</td> <td>7</td> <td>6</td> <td>5</td> <td>4</td> <td>3</td> <td>2</td> <td>1</td> <td>Total</td> </tr> <tr> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" onkeyup="calc(0)"value=""></td> <td><input size="8" value="" id="total"></td> </tr> <tr> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" onkeyup="calc(1)"value=""></td> <td><input size="8" value="" id="total"></td> </tr> </table>
我正在尝试通过计算 javascript 中一个字段的用户输入到另一个字段来自动填充文本字段
[英]I'm trying to auto populate text fields with a calculation of the user input of one field onto another in javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.