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 not 在UpdateTotal之后放置括号，因为它没有调用该函数，它正在获取对它的引用，因此稍后将在事件发生时调用它。

然后在你的函数中检查是否检查了第一个无线电，如果是，则使用其值，否则使用另一个无线电的值 - 显然这仅在只有两个无线电的情况下有效，但我相信你可以看到这是怎么回事可以延长以允许更多。

Answer 2

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

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

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

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

然后你的功能可以根据需要进行计算

使用Javascript更新价格总计

2 个答案: