JavaScript-HTML5数据属性

Question

我在网上四处寻找问题的答案。 找到了许多我已复制并弄乱的脚本，但无法使其正常工作。

当我运行它时，下面的脚本最初会起作用，但随后显示“ 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>

Answer 1

您在示例代码中有一个错字。

item_price = form_field.dataset.pric);

应该是

item_price = form_field.dataset.price;

除此之外， NaN是由以下事实造成的：在运行函数calculateTotal()时，您还考虑了“ total”字段的值。 但是该字段没有data-price属性，因此您将undefined与数字相乘，结果为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);
}

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