Question

因此，在我的页面上，当选择项目并单击“提交”按钮时，我需要它来显示订单的总价值。之所以具有执行此功能的功能，是因为我以前是在另一个项目中执行过此操作。但是我无法弄清楚如何对其进行更改以使其能够与此网页一起使用。这是我的网页：https://sstewart4proj4.glitch.me/

脚本文件：

var items= ["Supreme Box Logo Hoodie", "Supreme Rocks Tee", "Supreme Bear", 
"Supreme Bottle", "Supreme Bike"]

function itemsSelected(){
for (var i=0; i<5; i++){
var listItem = "item" + (i + 1);
                document.getElementById(listItem).innerHTML = items[i];
}
} 
window.addEventListener("load", itemsSelected);

function calcTotal(){
var itemTotal = 0;
var salesTax = 0.07;
var items = document.getElementsByTagName("label");
for (var i=0; i<5; i++) {
if (items[i].checked){
itemTotal += (items[i].value * 1) + (itemTotal * salesTax);
}
document.getElementById("total").innerHTML = "Your order total is $" + 
itemTotal.toFixed(2);
}
}

var submitButton = document.getElementById("sButton");
submitButton.addEventListener("click", calcTotal);

这是此网页的html部分：

<li id="item1"></li>
    <input type="checkbox" value="800" />
     <label for="item1">($800.00)</label>
     <p><img src= "https://cdn.glitch.com/0330c0c4-bb78-402b-903b- 
398de1dd6aac%2FSupreme-Box-Logo-Hooded-Sweatshirt-Magenta-FW17_1- 
1300x1300.jpg?1536539094007" /></p>
         <li id="item2"></li>
    <input type="checkbox" value="200" />
     <label for="item2">($200.00)</label>
     <p><img src= "https://cdn.glitch.com/0330c0c4-bb78-402b-903b-398de1dd6aac%2FSupreme-Rocks-Tee-Black.jpg?1536538557105" /></p>
         <li id="item3"></li>
    <input type="checkbox" value="200" />
     <label for="item3">($200.00)</label>
     <p><img src= "https://cdn.glitch.com/0330c0c4-bb78-402b-903b-398de1dd6aac%2Fbear.jpg?1537732437740" /></p>
         <li id="item4"></li>
    <input type="checkbox" value="60" />
     <label for="item4">($60.00)</label>
     <p><img src= "https://cdn.glitch.com/0330c0c4-bb78-402b-903b-398de1dd6aac%2Fbottle.jpg?1537732595993" /></p>
         <li id="item5"></li>
      <input type="checkbox" value="250" />
     <label for="item5">($250.00)</label>
     <p><img src= "https://cdn.glitch.com/0330c0c4-bb78-402b-903b-398de1dd6aac%2Fbike.jpg?1537732687382" /></p>
     <input type="button" id="submit" value="Submit" />

Answer 1

您正在尝试向ID为sButton的元素添加点击侦听器，但是没有任何匹配的元素。该选择器没有崩溃后，我感到很惊讶。使该选择器的ID与您的提交按钮匹配。

Answer 2

此行：

var submitButton = document.getElementById("sButton");

可能不正确。我认为这应该可行：

var submitButton = document.getElementById("submit");

因为在按钮<input type="button" id="submit" value="Submit" />中设置了一个ID。

我似乎无法获得“提交”按钮来显示总数

2 个答案: