Javascript 在html表单上执行计算

我对HTML和Javascript相当陌生，我被分配了一项任务，为一家餐厅创建一个HTML表单，允许用户输入预订信息。到目前为止，我已经为网站创建了表单，并验证了每个输入字段，以确保在必要的字段中输入正确的信息。但是，如果客户希望在VIP区域用餐，我还需要启用表单，根据聚会中的2个详细人数计算预订的总价

以下是迄今为止的相关html代码：

...    

<strong>Select Party Size:</strong>
<br>
<select name="party" id="party" onblur="validateSelect(name)">
<option value="">Please Select</option>
<option value="1">1 Person (£5)</option>
<option value="2">2 People (£10)</option>
<option value="3">3 People (£15)</option>
<option value="4">4 People (£20)</option>
<option value="5">5 People (£25)</option>
<option value="6">6 People (£30)</option>
<option value="7">7 People (£35)</option>
<option value="8">8 People (£40)</option>
<option value="9">9 People (£45)</option>
<option value="10+">10+ People (£50)</option>
</select>

...

<strong> VIP Area? </strong>
<br>
Yes (+£5) <input type="radio" name="hand" id="left" value="Yes"onblur="validateRadio(id)"/>
No <input type="radio" name="hand" id="right" value="No" onblur="validateRadio(id)"/>
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span>

...

<strong> Total booking cost based on party size & VIP selection: </strong>

例如，如果客户选择有6人参加他们的聚会，并且他们也希望坐在贵宾区，则页面底部显示的总价将为35英镑。我知道这可以用javascript实现，所以如果有人能告诉我如何实现，我将非常感激。谢谢大家!

试试这个

$document.readyfunction{ $document.on'change'，'party'，function e{ $'price'.htmlparseInt$this.val+parseInt$'input[name=hand]：选中'.val； }; $document.on'click'，input[name=hand]'，function e{ $'price'.htmlparseInt$'party'.val+parseInt$this.val； }; }; 选择聚会规模： 请选择 1人5英镑 2人10英镑 3人15英镑 4人20英镑 5人25英镑 6人30英镑 7人35英镑 8人40英镑 9人45英镑 10人以上，50英镑 贵宾区？ 是+5英镑 不 请指定您是否想要贵宾区的桌子。

---

基于聚会规模0 VIP选择的总预订成本：非常感谢您的回复，您发布的代码似乎在这里运行良好，但当我尝试将其实现到现有代码中时，当检查聚会规模或VIP区域时，总成本不会从0增加，我做错了什么吗？您使用了我发布的HTML吗？它有变化。