JavaScript-HTML5数据属性

Question

I've looked around on the web for an answer to my question. 我在网上四处寻找问题的答案。 Found lots of scripts that I've copied and messed around with but can't get it working properly. 找到了许多我已复制并弄乱的脚本，但无法使其正常工作。

When I run it, my script below initially works but then displays 'NaN'. 当我运行它时，下面的脚本最初会起作用，但随后显示“ NaN”。

I'm trying to create a simple order form that uses JavaScript to dynamically update and display the order total. 我正在尝试创建一个简单的订单表单，该表单使用JavaScript动态更新和显示订单总数。

Each item for sale has an input (type=number) tag that contains the item's price in a 'data-price' attribute. 每个待售商品都有一个输入（类型=数字）标签，该标签在“数据价格”属性中包含该商品的价格。

What I'm trying to do is grab the price out of the data-price attribute and use it in a JS script to display a total. 我想做的是从data-price属性中获取价格，并在JS脚本中使用它来显示总计。

Users can enter a quantity into text field and the TOTAL text field should automatically update with correct 'running total'. 用户可以在文本字段中输入数量，“总计”文本字段应自动更新为正确的“运行总计”。

Would appreciate any advice as to where I'm going wrong. 希望对我要去哪里有任何建议。 I've used JavaScript (as opposed to jQuery) because I'm more familiar with the syntax. 我使用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>

Answer 1

You have a typo in the sample code. 您在示例代码中有一个错字。

item_price = form_field.dataset.pric);

should probably be 应该是

item_price = form_field.dataset.price;

Apart from that, NaN is caused by the fact that you're also taking into account the value of the 'total' field when you run the function calculateTotal() . 除此之外， NaN是由以下事实造成的：在运行函数calculateTotal()时，您还考虑了“ total”字段的值。 But that field does not have a data-price attribute so you're multiplying undefined with a number, resulting in NaN . 但是该字段没有data-price属性，因此您将undefined与数字相乘，结果为NaN 。

You need to add an extra check if there is a 'data-price' attribute: 您需要添加额外的检查，是否存在“数据价格”属性：

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);
}

JavaScript-HTML5数据属性

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-08-28 10:50:38

JavaScript-HTML5数据属性

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-08-28 10:50:38

解决方案1
2 已采纳 2014-08-28 10:50:38