CODEWITHSUNDEEP
javascripthtml
Spencer
Spencer

Reputation: 99

I cannot seem to get the submit button to show the total

So on my page, when picking items and hitting the submit button I need it to show the total value of the order. I have the function to do so because I previously did it on another project. But I cannot figure out how to change it to make it work with this webpage. Here is my webpage: https://sstewart4proj4.glitch.me/

Script file:

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);

Here is my html portion for this webpage:

<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" />

Upvotes: 2

Views: 24

Answers (2)

Pemu Zeboalia
Pemu Zeboalia

Reputation: 17

This line:

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

Is probably not correct. I think this should work:

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

Because there is an id set in button <input type="button" id="submit" value="Submit" />.

Upvotes: 1

larz
larz

Reputation: 5766

You are trying to add a click listener to an element with the id of sButton but you don't have any elements that match. I'm surprised the line after that selector isn't blowing up. Make the id of that selector and your submit button match.

Upvotes: 1

Related Questions