使用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更新价格总数

回答

相关问题