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數據屬性

回答

相關問題