javascript - 我的代码在第 66 行被破坏,由于某种原因,我不断收到意外的令牌
问题描述
// add 5 other toppings here
if (document.getElementById("pepperoni").checked) {total = total + 2.25;}
if (document.getElementById("sausage").checked) {total = total + 2.25;}
if (document.getElementById("supreme").checked) {total = total + 2.75;}
if (document.getElementById("chicken").checked) {total = total + 2.25;}
if (document.getElementById("hawaiian").checked) {total = total + 2.50; }
line 66 // add 11.25% sales tax to the cost of the food (but not delivery)
total = {total + (total * (11.25 / 100));}
// add the delivery charge
total = {total + 3.00;}
// write the result to output
document.getElementById("output").innerHTML = {"Your total is: $" + total.toFixed(2);}
input type="checkbox" id="extracheese" value="2.00">
Extra Cheese (add $2.00)
<br>
<input type="checkbox" id="pepperoni" value="2.25">
Pepperoni (add $2.25)
<br>
<input type="checkbox" id="sausage" value="2.25">
Sausage (add $2.25)
<br>
<input type="checkbox" id="supreme" value="2.75">
Supreme (add $2.75)
<br>
<input type="checkbox" id="chicken" value="2.25">
Chicken (add $2.25)
<br>
<input type="checkbox" id="hawaiian" value="2.50">
Hawaiian (add $2.50)
<br>
</p>
<p id="pickupOrDelivery">
<input type="radio" name="pickup" id="pickup" value="pickup">
// pickup
if (document.getElementbyId("pickup").selected) {}
// delivery
else if (document.getElementbyId("delivery").selected) {total = total + 3.00}
// neither selected
else {alert("Please select pickup or delivery.");}
解决方案
更改您的代码如下:
// add 5 other toppings here
if (document.getElementById("pepperoni").checked) total = total + 2.25;
if (document.getElementById("sausage").checked) total = total + 2.25;
if (document.getElementById("supreme").checked) total = total + 2.75;
if (document.getElementById("chicken").checked) total = total + 2.25;
if (document.getElementById("hawaiian").checked) {total = total + 2.50; }
line 66 // add 11.25% sales tax to the cost of the food (but not delivery)
total = total + (total * (11.25 / 100));
// add the delivery charge
total = total + 3.00;
// write the result to output
document.getElementById("output").innerHTML = `Your total is:
$${total.toFixed(2)`;
不要将所有内容都包装在 {}
还要考虑这个:
const calcToppings = () => Array.from(document.querySelectorAll('.topping'))
.filter(el => el.checked)
.map(({ value }) => parseFloat(value))
.reduce((a,v) => a+v,0);
document.addEventListener('click', ({ target }) => {
if(target.matches('button')) {
document.querySelector('.result').innerText = calcToppings();
}
});
<input type="checkbox" id="extracheese" class="topping" value="2.00"> Extra Cheese (add $2.00)
<br>
<input type="checkbox" id="pepperoni" class="topping" value="2.25"> Pepperoni (add $2.25)
<br>
<input type="checkbox" id="sausage" class="topping" value="2.25"> Sausage (add $2.25)
<br>
<input type="checkbox" id="supreme" class="topping" value="2.75"> Supreme (add $2.75)
<br>
<input type="checkbox" id="chicken" class="topping" value="2.25"> Chicken (add $2.25)
<br>
<input type="checkbox" id="hawaiian" class="topping" value="2.50"> Hawaiian (add $2.50)
<br>
<button>Click Me</button>
<div class="result"></div>
这允许使用非常容易地添加/删除顶部选项,而无需调整我们的脚本。
推荐阅读
- dictionary - 来自另一个源文件的 TCL 字典
- html - 视频上传 HTML5 未按预期上传到我的页面
- android-room - INSERT query type is not supported yet. You can use:SELECT, DELETE, UPDATE
- c# - 增强并行操作 C#
- java - 返回一个新的 MenuItems ArrayList,其中仅包含当前可用的那些菜单项
- ios - 如何从 iOS 上的照片输出中检索 AVCameraCalibrationData?
- flutter - 流构建器的 Flutter DropdownMenuItem 问题
- c# - C# JSON 我无法反序列化双精度数。我得到“不是一个有效的整数错误”
- javascript - 如何更新 FullCalendar 中的事件
- php - 保存在正则表达式 php 中找到的部分