JavaScript - HTML5数据属性

我在网上浏览过我的问题的答案。发现了很多我复制过的脚本，但无法正常工作。JavaScript - HTML5数据属性

当我运行它时，我的脚本最初工作，但随后显示'NaN'。

我试图创建一个简单的订单，使用JavaScript来动态更新和显示订单总额。

每个待售商品都有一个输入（类型=数字）标签，该标签在“数据价格”属性中包含该商品的价格。

我想要做的是从data-price属性中获取价格，并在JS脚本中使用它来显示总数。

用户可以在文本字段中输入数量，并且总文本字段应该使用正确的“运行总计”自动更新。

希望能告诉我哪里出错了。我使用JavaScript（与jQuery相对），因为我更熟悉语法。

<script> 

function calculateTotal(frm) { 
var order_total = 0 

for (var i=0; i < frm.elements.length; ++i) { 

    form_field = frm.elements[i]; 

    item_price = form_field.dataset.pric); 

    item_quantity = form_field.value; 

     if (item_quantity >= 0) { 
      order_total += item_quantity * item_price; 
     } 
} 

frm.total.value = round_decimals(order_total, 2); 
} 

function round_decimals(original_number, decimals) { 
var result1 = original_number * Math.pow(10, decimals); 
var result2 = Math.round(result1); 
var result3 = result2/Math.pow(10, decimals); 
return result3.toFixed(2); 

} 

</script> 

</head> 

<body> 


<form id="order-form"> 

<table cellpadding="8" align="center"> 

<tr> 
    <td align="left" width="150">Image</td> 
    <td align="left">Description</td> 
    <td align="left">Price</td> 
    <td align="left">Quantity</td> 
</tr> 

<tr> 
    <td align="left"><img src="http://placehold.it/150x200"></td> 
    <td align="left">Poster</td> 
    <td align="left">$24.00</td> 
    <td align="left"><input type="number" data-price="24" min="0" max="50" step="1" value="0" onChange="calculateTotal(this.form)"></td> 
</tr> 

<tr> 
    <td align="left"><img src="http://placehold.it/150x200"></td> 
    <td align="left"> T-shirt</td> 
    <td align="left">$66.00</td> 
    <td align="left"><input type="number" data-price="65" min="0" max="50" step="1" value="0" onChange="calculateTotal(this.form)"></td> 
</tr> 

<tr> 
    <td align="left"><img src="http://placehold.it/150x200"></td> 
    <td align="left"> Bag</td> 
    <td align="left">$120.00</td> 
    <td align="left"><input type="number" data-price="120" min="0" max="50" step="1" value="0" onChange="calculateTotal(this.form)"></td> 
</tr> 

<tr> 
    <td></td> 
    <td></td> 
    <td>TOTAL:</td> 
    <td align="right"><input type="text" name="total" size="6" onFocus="this.form.elements[0].focus()"></td> 
</tr> 

</table> 

</form> 

</div>

来源

2014-08-28 Mekong

您在示例代码中存在拼写错误。

item_price = form_field.dataset.pric);

大概应该是

item_price = form_field.dataset.price;

除此之外，NaN由事实，你还考虑到“总”字段的值，当你运行功能calculateTotal()引起的。但是该字段没有data-price属性，因此您将未定义的数字与数字相乘，结果为NaN。

你需要的，如果有一个“数据价格”属性添加额外的检查：

function calculateTotal(frm) { 
    var order_total = 0; 
    for (var i=0; i < frm.elements.length; ++i) { 
     form_field = frm.elements[i]; 

     if(typeof(form_field.dataset.price) != 'undefined') { 
      item_price = form_field.dataset.price; 
      item_quantity = form_field.value; 
      if (item_quantity >= 0) { 
       order_total += item_quantity * item_price; 
      } 
     } 
    } 
    frm.total.value = round_decimals(order_total, 2); 
}

来源

2014-08-28 10:50:38

感谢怀特先生。 Typo不是原始代码。我在输入问题时做出了决定（但指出了）。感谢您的解释。我明白我现在出错了。 – Mekong 2014-08-28 11:21:48

JavaScript - HTML5数据属性

回答

相关问题