使用Javascript更新总价

Updating price total with Javascript

本文关键字：更新 Javascript 使用      更新时间：2023-09-26

我目前正在帮助处理一个本地反昆活动的预订表格，但每当用户做出更改时，我都很难更新页面上的总数。

背景：有两个票层，高级票（10英镑）和普通票（5英镑）。用户还可以添加额外的"估价"，每个估价为3英镑。

目前，用户可以通过单选按钮选择他们的机票，一个用于高级，另一个用于常规。

它们通过文本框指定附加估价。

我希望能够在用户进行更改时更新总数（选择单选按钮，在文本框中更新总数）。

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

您当前的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后面放括号，因为它不是在调用函数，而是在获取对函数的引用，因此稍后事件发生时会调用它。

然后在你的函数中，它会检查第一个无线电是否被检查，如果是，则使用它的值，否则使用另一个无线电的值-显然，这只在只有两个无线电的情况下有效，但我相信你可以看到如何扩展它以允许更多的无线电。

对于影响总数的每个无线电元素，您只需处理"onclick"：

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

对于一个文本框，你不想这样做（如果你点击进入就会这样做），所以你可以查看onchange或onkeyup

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

然后，您的函数可以根据需要进行计算

相关文章：