Javascript選擇更改價格

如果用戶使用下拉框選擇可選附件，我試圖更新產品的價格。它應該更新隱藏的領域以及向用戶顯示新價格的H1標籤。它似乎沒有工作。Javascript選擇更改價格

function xDeckIncreasePrice(price) { 
var total = document.getElementById("agreedPrice").value; 
var newprice = Number(total) + Number(price); 
document.getElementById("mixingDeckTotal").innerHTML = "£" + newprice + ""; 
document.getElementById("agreedPrice").value = "£" + newprice + ""; 
}

下面是HTML：

<select name="size"> 
    <option value="6inch">6 Inch</option> 
    <option value="footlong" onselect="xDeckIncreasePrice('2.50')">Footlong (+£2.50)</option> 
</select>

這裏要更新的元素：

<h1 style="color:red;" id="mixingDeckTotal">£4.50</h1><p> 
<input type="hidden" id="agreedPrice" value="£4.50">

來源

2017-03-08 Rick

比較合適，有什麼不工作？ –

它不會改變H1元素或隱藏的字段值 – Rick

你可以試試這個。 – Pradeep

除了在價格£使用，不會換號工作在JavaScript中，<option>標記不支持onselect事件。你應該使用<select>的onchange事件。

類似的問題：How to use onClick() or onSelect() on option tag in a JSP page?

來源

2017-03-08 12:37:36 burtek

感謝這個工作，但它返回NaN - 英鎊符號沒有考慮到數字 - 它可能是小數造成這種情況？ – Rick

對不起，我剛剛看到這個英鎊是在隱藏價值。非常感謝 – Rick

您應該ONSELECT事件更改爲onchange事件實際select元素本身。您還應該更改選擇選項以獲得選項代表的價格值。然後，您應該更改您要撥打的事件，將文本設置爲所選選項的值。

function xDeckChangePrice(element) { 
 
    document.getElementById("mixingDeckTotal").innerHTML = "£" + element.value + ""; 
 
}

<select name="size" onchange="xDeckChangePrice(this)"> 
 
    <option value="4.5">6 Inch</option> 
 
    <option value="7">Footlong (+£2.50)</option> 
 
</select> 
 

 
<h1 style="color:red;" id="mixingDeckTotal">£4.50</h1>

來源

2017-03-08 12:45:40 Joffutt4

Javascript選擇更改價格

回答

相關問題