Question

大家好！我试图使用getElementsByName而不是ID来汇总我的所有字段，因为我有3个同名的文本框，如果我使用ID，第一个文本框只能工作，其余的不工作..

    var shirt1=parseFloat( document.getElementsByName("shirt[]")[0].value);
    var shirt2=parseFloat( document.getElementsByName("shirt[]")[1].value);
    var shirt3=parseFloat( document.getElementsByName("shirt[]")[2].value);

    var combi1=parseFloat( document.getElementsByName("combi[]")[0].value);
    var combi2=parseFloat( document.getElementsByName("combi[]")[1].value);
    var combi3=parseFloat( document.getElementsByName("combi[]")[2].value);

var collarcuff1=parseFloat( document.getElementsByName("collarcuff[]")[0].value);
var collarcuff2=parseFloat( document.getElementsByName("collarcuff[]")[1].value);
var collarcuff3=parseFloat( document.getElementsByName("collarcuff[]")[2].value);

    var csp1=parseFloat( document.getElementsByName("csp[]")[0].value);
    var csp2=parseFloat( document.getElementsByName("csp[]")[1].value);
    var csp3=parseFloat( document.getElementsByName("csp[]")[2].value);

    var totalValue = (shirt1 + combi1 + collarcuff1 + csp1).toFixed(2);

    document.getElementsByName("subtotal[]")[0].value = totalValue;

我的HTML代码是

<div style="height: 20px;">
<label style="display: inline-block !important;   padding-bottom: 5px;
      vertical-align: middle;float: left; font-weight: bold;">Shirt: </label>

<input style="float: right; margin-left: 8px;" type="text" name="shirt[]" autocomplete="off" id="shirt" pattern="^\d+(\.)\d{2}$" value="0.00"  onkeyup="getValues()" />
</div>

<br />

<div style="height: 20px;">
 <label style="display: inline-block !important;   padding-bottom: 5px;
vertical-align: middle;float: left; font-weight: bold;">Combi: </label>

<input style="float: right;" type="text" name="combi[]" autocomplete="off" id="combi" value="0.00" style="margin-left: 8px;" pattern="^\d+(\.)\d{2}$" onkeyup="getValues()"/>
</div>
 <br />

<div style="height: 20px;">
<label style="display: inline-block !important;   padding-bottom: 5px;
 vertical-align: middle;float: left; font-weight: bold;">Collar and Cuff: </label>

<input style="float: right;" type="text" name="collarcuff[]" autocomplete="off" id="collarcuff" style="margin-left: 8px;" value="0.00" pattern="^\d+(\.)\d{2}$"  onkeyup="getValues()"/>
</div>

 <br />

<div style="height: 20px;">
 <label style="display: inline-block !important;   padding-bottom: 5px;
vertical-align: middle;float: left; font-weight: bold;">CSP: </label>
 <input style="float: right;" type="text" name="cmp[]" autocomplete="off" id="csp" style="margin-left: 8px;" value="0.00" pattern="^\d+(\.)\d{2}$" onkeyup="getValues()" />

</div>

    <div style="height: 20px;">
    <label style="display: inline-block !important;   padding-bottom: 5px;
    vertical-align: middle;float: left; font-weight: bold;">Sub-Total: </label>

    <input style="float: right;" type="text" name="subtotal[]" id="subtotal" value="0.00" style="margin-left: 8px;"  onkeyup="getValues()" />
    </div>

应将shirt1，combi1，collarcuff1和csp1的总和添加到小计中。但它没有显示。但是，当我使用Id添加它们所有的工作为什么它不起作用？请帮我。感谢

Answer 1

键入时控制台中出现错误，原因是您没有正确命名元素。

"csp[]" !== "cmp[]"

你的HTML

<input style="float: right;" type="text" name="cmp[]" autocomplete="off" id="csp" ...
                                         ^^^^^^^^^^^^

您的JavaScript

var csp1=parseFloat( document.getElementsByName("csp[]")[0].value); 
                                                ^^^^^^^

＆＃13;

function getValues() {

  var shirts = document.getElementsByName("shirt[]"),
      combi = document.getElementsByName("combi[]"),
      collarcuff = document.getElementsByName("collarcuff[]"),
      csp = document.getElementsByName("csp[]"),
      subtotals = document.getElementsByName("subtotal[]"),  
      grandTotal = 0,
      i;
  for (i = 0; i < shirts.length; i++) {
    var subTotal = parseFloat(shirts[i].value) + parseFloat(combi[i].value) + parseFloat(collarcuff[i].value) + parseFloat(csp[i].value);
    subtotals[i].value = subTotal.toFixed(2);
    grandTotal+=subTotal;
  }
  document.getElementsByName("grandtotal")[0].value = grandTotal.toFixed(2);
}

＆＃13;

label {
  display: inline-block;
  text-align: right;
  width: 20%;
}
input {
  display: inline-block;
  width: 70%;
}

＆＃13;

<label>S:</label>
<input type="text" value="0.00" name="shirt[]" onkeyup="getValues()" />
<label>CO:</label>
<input type="text" value="0.00" name="combi[]" onkeyup="getValues()" />
<label>CC:</label>
<input type="text" value="0.00" name="collarcuff[]" onkeyup="getValues()" />
<label>CSP:</label>
<input type="text" value="0.00" name="csp[]" onkeyup="getValues()" />
<label>ST:</label>
<input type="text" name="subtotal[]" readonly/>
<hr/>

<label>S:</label>
<input type="text" value="0.00" name="shirt[]" onkeyup="getValues()" />
<label>CO:</label>
<input type="text" value="0.00" name="combi[]" onkeyup="getValues()" />
<label>CC:</label>
<input type="text" value="0.00" name="collarcuff[]" onkeyup="getValues()" />
<label>CSP:</label>
<input type="text" value="0.00" name="csp[]" onkeyup="getValues()" />
<label>ST:</label>
<input type="text" name="subtotal[]" readonly/>
<hr/>

<label>S:</label>
<input type="text" value="0.00" name="shirt[]" onkeyup="getValues()" />
<label>CO:</label>
<input type="text" value="0.00" name="combi[]" onkeyup="getValues()" />
<label>CC:</label>
<input type="text" value="0.00" name="collarcuff[]" onkeyup="getValues()" />
<label>CSP:</label>
<input type="text" value="0.00" name="csp[]" onkeyup="getValues()" />
<label>ST:</label>
<input type="text" name="subtotal[]" readonly/>
<hr/>

<label>Grand Total</label>
<input type="text" name="grandtotal" readonly/>

＆＃13;

Answer 2

这是最适合使用QSA的地方，即

var shirts = [];
var combi = [];
temp = document.querySelectorAll("name=shirt[]");
for( x=0; x<temp.length; x++ ) {
   shirts[x] = parseFloat(temp[x].value);
}
temp = document.querySelectorAll("name=combi[]");
for( x=0; x<temp.length; x++ ) {
   combi[x] = parseFloat(temp[x].value);
}

etc etc

shirt1 = shirts[0] + combi[0} + ....

如何将javascript document.getElementsByName相加

2 个答案: