使用Javascript更新價格總數

我正在爲當地的古董活動提供預訂表格，但每當用戶進行更改時，我都無法更新頁面上的總數。使用Javascript更新價格總數

背景：有兩個票層，高級（£10）和普通（£5）。用戶還可以添加額外的「估價」，每個價格爲3英鎊。

目前，用戶可以使用單選按鈕選擇他們的票證，一個用於Premium，另一個用於Regular。

他們用文本框指定額外的估值。

我希望能夠隨時更新總數（選擇單選按鈕，更新文本框中的總數）。

不幸的是，Javascript並不是我的強項，所以我不知道事件的來龍去脈以及這是否可能。這裏是我的javascript到目前爲止（沒有確認的是，在功能純粹是工作的那一刻）

JavaScript函數（UpdateTotal）

function UpdateTotal() { 
/* Get prices and calculate total */ 
var ticketPrice = document.getElementById('tick_choice').value; 
var additionals = parseInt(document.getElementById('additional_valuations').text, 10); 
var total = ticketPrice + additionals; 

/* Attempt to update the value (Inside a TD tag) */ 
document.getElementById('totalPayable').innerHTML="£"+total; 
}

什麼是調用使用JS這個代碼的最佳方式事件？

非常感謝！

編輯：下面是相關HTML

單選按鈕：

<input id="tick_choice" type=RADIO VALUE="10"> Premium 
<input id="tick_choice" type=RADIO VALUE="5"> Regular

文本框：

<input type="text" id="regular_tickets">

來源

2012-03-03 Cameron Wilby

您是否也可以包含HTML的相關部分？您正在尋找的事件是'換'btw。 – 2012-03-03 11:46:02

爲什麼你認爲JavaScript是一門簡單的語言？（它實際上非常強大。） – nnnnnn 2012-03-03 11:51:47

編輯：意見刪除。 – 2012-03-03 11:52:16

你當前的html無效：你不應該給同一個id多個元素，所以當你使用document.getElementById("tick_choice")時，它只會找到其中的一個。對於單選按鈕來說，它們需要具有相同的名稱屬性，但如果您想通過document.getElementById()來訪問它們，則它們可以具有不同的ID。你可以這樣說：

<input id="tick_choice_premium" name="tick_choice" type=RADIO VALUE="10"> Premium 
<input id="tick_choice_regular" name="tick_choice" type=RADIO VALUE="5"> Regular 

<script> 
    var choicePremium = document.getElementById("tick_choice_premium"), 
     choiceRegular = document.getElementById("tick_choice_regular"), 
     additionals = document.getElementById("additional_valuations"); 

    choicePremium.onclick = UpdateTotal; 
    choiceRegular.onclick = UpdateTotal; 
    additionals.onchange = UpdateTotal; 

    function UpdateTotal() { 
     /* Get prices and calculate total */ 
     var ticketPrice = choicePremium.checked ? choicePremium.value 
               : choiceRegular.value; 
     var additionals = parseInt(additionals.value, 10); 
     var total = ticketPrice + additionals; 

     /* Attempt to update the value (Inside a TD tag) */ 
    document.getElementById('totalPayable').innerHTML="£"+total; 
    } 
</script>

把腳本塊在車身的底部，或之後的元素無論如何，所以這三元素都已經當代碼運行到指定事件處理程序解析。

以上內容是通過保持對變量中的DOM元素的引用開始的，以便可以在設置事件處理程序和設置函數時訪問它們，而無需在每個地方重複執行document.getElementById()。

然後它設置它，所以當單選按鈕被改變時，你的功能將被調用（對於收音機或檢查按鈕，點擊事件發生，即使它們通過鍵盤改變時），並且當文本框被改變時函數將被調用。請注意，.onclick = UpdateTotal確實是而不是在UpdateTotal之後放了括號，因爲它沒有調用該函數，它正在獲取對該函數的引用，所以將在事件發生時稍後調用它。

然後在你的函數中，它檢查第一個無線電是否被選中，如果是，則使用其值，否則使用另一個無線電的值 - 顯然這隻適用於只有其中兩個，但我相信你可以看到這可以擴展到允許更多。

來源

2012-03-03 12:02:09 nnnnnn

在這一影響總你每個無線電元件只能處理「onclick」：

<input id="tick_choice" type="radio" value="10" onclick="UpdateTotal();" />

對於你不希望這樣做（它將如果你點擊進入）一個文本框，所以不是你可以看看在任平變化或的onkeyup

<input type="text" onchange="UpdateTotal();" />

然後根據需要你的函數可以做的計算

來源

2012-03-03 11:57:44 kaj

儘管'UpdateTotal'函數不正確，你應該使用'onchange'。 – 2012-03-03 12:00:25

使用Javascript更新價格總數

回答

相關問題