javascript - 如何使用此表格查看、计算和显示总价？

Question

HTML：

<div class="simpleCart_shelfItem">
    <img src="image/frod001.gif" alt="" />
    <p class="item_name">Fishing rod model 001</p>
    <span class="item_price">BND $189.95</span><br/>            
    Qty: <input type="text" class="item_quantity" value="1" style="width:20px;"/><br/>
    <input type="button" onclick="calculateText();" value="add to cart" />
</div> 

我是编码和 Javascript 的新手。我希望按钮工作但没有 PHP，只有 Javascript

Answer 1

试试这个http://jsfiddle.net/KgAe4/4/：

<div class="simpleCart_shelfItem">
    <img src="image/frod001.gif" alt="" />
    <p class="item_name">Fishing rod model 001</p>                                  
    <span class="item_price">BND $189.95</span><br/>                                
    Qty: <input type="text" class="item_quantity" value="1" style="width:20px;"/><br/>
    <input type="button" onclick="javascript:calculateText();" id="calculateText" value="add to cart" />                          
</div>  

jQuery

$("#calculateText").on("click", function(){
    var price = $(".item_price").text();
    var priceSplit = price.split("$");
    var realprice = parseFloat(priceSplit[1]);
    alert(realprice);
    var quantity = $(".item_quantity").val();
    alert(realprice*quantity);
});

Javascript

function calculateText(){
    var price = document.getElementsByClassName("item_price")[0].innerHTML;
    var priceSplit = price.split("$");
    var realprice = parseFloat(priceSplit[1]);
    var quantity = document.getElementsByClassName("item_quantity")[0].value;
    alert(realprice*quantity);
}

Answer 2

修改您的 html，将跨度更改为：

<span class="item_price">BND <label id="price">189.95</label></span><br/> 

和js：

function calculateText(){
var price=document.getElementById("price").innerText
var quantity=document.getElementsByClassName("item_quantity")[0].value
var total=price*quantity
alert("total: $"+total)

}