Question

我有一个表格（价格和数量）的2个字段，我想在结果div（“答案”）上设置这两个字段的乘积。到目前为止，我已经做了一些事情，但是如果我在dinamically添加一个新行，使用相同的字段，当然我会得到一个与旧版本相同的div。我正试着做某种购物车。

表单的HTML

<input type='text' id='price' name='price' value='0'>
 <input type='text' id='qty' name='qty' value='0'     onblur="multiply.call(this,this.form.elements.price.value,this.form.elements.qty.value)">
<div id='answer'></div>

JS

function multiply(one, two) {
  if(one && two){
    var myTarget = document.getElementById("answer");
    myTarget.innerText = one*two;
  } else {
    this.style.color='red';
  }
}

当然，生成HTML的JS

document.getElementById('text').innerHTML += "...<input type='text' name='price'></td><td><input type='text' name='qty'></td><td><div id='answer'></div></td></tr></table>";}

希望我有意义lol。谢谢！

Answer 1

对于可能多次显示在页面上的元素，请使用class代替id。否则，如果您要跟踪添加到页面的元素，您可以为它们提供id="price_0"，id="price_1"等索引。

Answer 2

欢迎使用stackoverflow。您可能知道， HTML元素的ID必须是唯一的。因此，您可以使用名为“price_1”，“quantity_1”，......“price_100”的字段动态生成行。

然后创建乘法函数，并用行调用它：

        function multiply(rowNumber) {

            var myTarget = document.getElementById("answer_"+rowNumber),
                myPrice=parseInt(document.getElementById("price_"+rowNumber)),
                myQuantity=parseInt(document.getElementById("qty_"+rowNumber));

            if (isNaN(myPrice) || isNaN(myQuantity)) {

                // put on red, or whatever. Also, you should check for negative values
                // so people don't trick the quantity field to get stuff for free :P

                myTarget.innerText="---";

            } else {

                 myTarget.innerText = myPrice * myQuantity;

            }
        }

还有很多其他可能性，请记住ID必须是唯一的！

顺便说一句 - 使用NaN保护的快速方法可以使用我很多的NaN保护：

 myQuantity =parseInt(document.getElementById("qty_"+rowNumber)) || 0;

因为NaN的评估为布尔值为false。您可能会发现此技术也很有用。

JS - 函数乘以两个表单字段（使用动态生成的div）

2 个答案: