Question

我现在正在学习JavaScript，这对于语法和DOM操作来说都是新手。

现在我并没有真正使用jQuery（或任何其他库）。我之前使用过它，但之前并不感兴趣，因为我想抓住它然后转移到一个库。我正在寻找不涉及库的简单JavaScript示例。

<form name="carritoDeCompras" action=""> 
 <table width="100%" border="0">
  <tr>
    <td width="17%">Nombre de Articulo </td>
    <td width="22%">Precio</td>
    <td width="51%"> Cantidades</td>
  </tr>
  <tr>
    <td>Desktop</td>
    <td><input name="price[]" type="text" disabled="disabled" value="1900.00" id="1 "/></td>
    <td><input name="cantidad[]" type="text" value="4" id="1 cantidad" /></td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td><input name="price[]" type="text" disabled="disabled" value="322.00" id="2" /></td>
    <td><input name="cantidad[]" type="text" value="2" id="2 cantidad" /></td>

  </tr>
  <tr>
    <td>Disco Duro</td>
    <td><input name="price[]" type="text" disabled="disabled" value="244.33" id="3"/></td>
    <td><input name="cantidad[]" type="text" value="10" id="3 cantidad" /></td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td><input name="price[]" type="text" disabled="disabled" value="100.21" id="4"/></td>
    <td><input name="cantidad[]" type="text" value="100" id="4 cantidad" /></td>
  </tr>
</table>
</form>

我的目标是将价格和数量（cantidad）分开并将其与“更新价格”按钮相加。它让我对如何抓住那些“price []”“cantidad []”输入并将它们保持分离存在疑问，因此我可以创建一个循环并很好地进行数学运算。

抱歉西班牙语/英语混合，妨碍了，

Answer 1

您需要使用document.getElementsByName

var prices = document.getElementsByName("price[]");
var quantities = document.getElementsByName("cantidad[]");

IE和MDC（Firefox）的文档。

如果你需要迭代的帮助：

var totalPrice    = 0,
    totalQuantity = 0,
    i;

i = prices.length;
while ( i-- ) { totalPrice    += +prices[i]     || 0; }

i = quantities.length;
while ( i-- ) { totalQuantity += +quantities[i] || 0; }

+中的+prices[i]会将值转换为整数。 || 0是为了确保只返回数字。如果prices[i]是类似“asdf”的字符串，则+"asdf"评估为NaN，这意味着totalPrice += NaN也将是NaN。但是，NaN || 0评估为0，因此您可以避免此问题。

Answer 2

您可以使用名为getElementsByName()的方法。例如：

var inputs = document.getElementsByName("cantidad[]");
var total = 0;
for (var i = 0; i < inputs.length; i++) {
    total += inputs[i].value - 0; // the - 0 is there to make sure the value is converted to a number
}

total变量现在包含总金额。

Documentation on getElementsByName() at w3schools

当JavaScript中有不同的输入数组时该怎么办？

2 个答案: