使用Javascript更新价格合计

我现在正在帮助一个本地古董活动的预订表单，但是每当用户进行更改时，我都很难更新页面上的总数

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

目前，用户可以通过单选按钮选择他们的车票，一个是高级车票，一个是普通车票

它们使用文本框指定其他估值

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

不幸的是，Javascript不是我的堡垒，所以我不知道事件的来龙去脉，也不知道这是否可能。 这是我的javascript（目前还没有验证，只是在处理函数）

Javascript函数（UpdateTotal）

使用JS事件调用此代码的最佳方式是什么

非常感谢

编辑：以下是相关的HTML

对于单选按钮：

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

Premium
有规律的

对于文本框：

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

---

针对影响总量的每个无线电元素，您只需处理“onclick”：

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

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

---

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

您当前的html无效：您不应该为多个元素提供相同的id，因此当您使用

document.getElementById（“勾选”）

时，它只会找到其中一个元素。要使单选按钮作为一个组运行，它们需要具有相同的name属性，但如果您想使用

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>

Premium
有规律的
var choicePremium=document.getElementById（“勾选溢价”），
choiceRegular=document.getElementById（“勾选规则”），
additionals=document.getElementById（“附加估值”）；
choicePremium.onclick=UpdateTotal；
choiceRegular.onclick=UpdateTotal；
additionals.onchange=UpdateTotal；
函数UpdateTotal（）{
/*获取价格并计算总价格*/
var ticketPrice=choicePremium.checked？choicePremium.value
：choiceRegular.value；
var additionals=parseInt（additionals.value，10）；
var total=票券价格+额外费用；
/*尝试更新值（TD标记内）*/
document.getElementById（'TotalPayment'）。innerHTML=“£”+总计；
}

将脚本块放在正文的底部，或者放在元素之后，这样当代码运行以分配事件处理程序时，元素就已经被解析了

上面所做的是首先在变量中保留对DOM元素的引用，这样就可以访问它们来设置事件处理程序，也可以在函数中访问它们，而无需到处重复

document.getElementById（）

然后将其设置为，当单选按钮更改时，将调用您的函数（对于单选按钮或复选按钮，即使通过键盘更改，也会发生单击事件），并且当文本框更改时，也将调用您的函数。请注意，

.onclick=UpdateTotal

不会在

UpdateTotal

后面加括号，因为它不是在调用函数，而是在获取对该函数的引用，因此在事件发生后将调用该函数

---

然后在您的函数中，它检查是否检查了第一个收音机，如果是，则使用它的值，否则使用另一个收音机的值-显然，这只在只有两个收音机的情况下有效，但我相信您可以看到如何扩展这一功能以允许更多。请您也包括HTML的相关部分好吗？您正在寻找的事件是

change

btw。为什么您认为JavaScript是一种简单的语言？（它实际上相当强大。）@cswilby这不会正常工作。您不能使用同一ID两次（

勾选

）。但是

UpdateTotal

函数不正确，您应该使用

onchange

。

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

<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>