使用Javascript更新價格總計

Question

我正在為當地的古董活動提供預訂表格，但是無論何時用戶進行更改，我都無法更新頁面上的總數。

背景：有兩個票層，Premium（10英鎊）和Regular（5英鎊）。 用戶還可以以每個3英鎊的價格添加額外的“估值”。

此時，用戶可以使用單選按鈕選擇他們的票證，一個用於Premium，一個用於常規。

它們使用文本框指定其他評估。

我希望能夠在用戶進行更改時更新總計（選擇單選按鈕，更新文本框中的總計）。

不幸的是，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">

Answer 1

您當前的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 ，因為它沒有調用該函數，這是得到它的引用，以便在事件發生時它會被以后調用。

然后在您的函數中檢查是否檢查了第一個無線電，是否使用了它的值，否則使用了另一個無線電的值-顯然，這僅在只有兩個無線電的情況下有效，但是我敢肯定，您可以看到如何擴展它允許更多。

Answer 2

對於影響總數的每個無線電元素，您只需處理“onclick”：

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

對於一個文本框，你不想這樣做（如果你點擊進入就會這樣），所以你可以看看onchange或onkeyup

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

然后您的函數可以根據需要進行計算