0

I add oninput for every countable option so that the cost will be calculated and displayed on order price <h1> within <div>. I can't seem to display the message on my <h1 id="orderprice>. Why can't my javascript run and display the total cost on my html page?

function pizzacost() {
  var totalcost = 0
  if (document.getElementsByName("size").value = "small") {
    totalcost = totalcost + 22
  } else if (document.getElementsByName("size").value = "medium") {
    totalcost = totalcost + 28
  } else if (document.getElementsByName("size").value = "large") {
    totalcost = totalcost + 35
  }


  var options = document.getElementById('toppings').options,
    count = 0;
  for (var i = 0; i < options.length; i++) {
    if (options[i].selected) count++;

    totalcost = totalcost + (count * 2)
  }

  if (document.getElementsByName("addon").value = "side of buffalo wings") {
    totalcost = totalcost + 5
  } else if (document.getElementsByName("addon").value = "garlic bread") {
    totalcost = totalcost + 3
  } else {
    total = totalcost + 8
  }

  totalcost = (totalcost * document.getElementsByName("quantity").value)

  document.getElementById("orderprice").innerHTML = "Total price for your order is $" + totalcost
}
<form>
  <h1>Pizza Order Form</h1>
  <br />
  Type Of Pizza:
  <select oninput="pizzacost()" required>
    <option value="please select...">Please select...</option>
    <option value="aloha chicken">Aloha Chicken</option>
    <option value="beef pepperoni">Beef Pepperoni</option>
    <option value="chicken delight">Chicken Delight</option>
    <option value="deluxe cheese">Deluxe Cheese</option>
  </select> Quantity:
  <input oninput="pizzacost()" type="number" name="quantity" min="1" max="4" value="1" />
  <br />
  Size:
  <br />
  <input oninput="pizzacost()" type="radio" name="size" value="small" required /> Small
  <input oninput="pizzacost()" type="radio" name="size" value="medium" required /> Medium
  <input oninput="pizzacost()" type="radio" name="size" value="large" required /> Large
  <br />
  Crust:
  <br />
  <input type="radio" name="crust" value="thin" required /> Thin
  <input type="radio" name="crust" value="thick" required /> Thick
  <input type="radio" name="crust" value="deep dish" required /> Deep Dish
  <br />
  Toppings:
  <br />
  <input oninput="pizzacost()" type="checkbox" name="toppings" value="mushrooms" /> Mushrooms
  <input oninput="pizzacost()" type="checkbox" name="toppings" value="sausage" /> Sausage
  <input oninput="pizzacost()" type="checkbox" name="toppings" value="olives" /> Olives
  <br /> Addons:
  <select oninput="pizzacost()" id="addon" multiple required>
    <option value="please select addons if required">Please select addons if required</option>
    <option value="side of buffalo wings">Side of buffalo wings</option>
    <option value="garlic bread">Garlic Bread</option>
  </select>

  <div>
    <h1 id="orderprice"></h1>
    <script type="text/javascript" src="pizzaScript.js" defer></script>
  </div>
  <br />
  Deliver to:
  <br />
  <input type="submit" name="submit" />
  <input type="reset" name="reset" />
</form>
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
lucwerzowski
  • 1
  • 2
  • If you converted that example to a JS Snippet in the editor, we could try it out. As is, your example is incomplete ( you never include the javascript in the html) so we can't help you debug it. – erik258 Dec 10 '17 at 16:21
  • What have you done to debug? Does your JavaScript run or is it not getting called at all? – Ryan Walker Dec 10 '17 at 16:27
  • my javascript runs but the message just doesnt displays in

    – lucwerzowski Dec 10 '17 at 16:39
  • running your code on codeine shows that getelementbyId('toppings') returns null.. please see this answer to help you https://stackoverflow.com/questions/8739605/getelementbyid-returns-null – stackunderflow Dec 10 '17 at 17:31
  • codepen not codepine https://codepen.io/anon/pen/ppzzJE?editors=1111 – stackunderflow Dec 10 '17 at 17:39
  • i've changed getelementbyId('toppings') to getelementbyname already but there is still no change – lucwerzowski Dec 10 '17 at 17:52

0 Answers0