Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down List and Javascript

    I am working on a website that involves a pizza. I have a drop down box with the following options: small, medium, large, and extra large. When the user selects small the topping price is $0.75 each, when the user selects medium the topping price is $1.00 each, when the user selects large the topping price is $1.25 each, and when the user selects extra large the topping price is $1.25 each. I the problem is no matter what size the user selects the topping price is always $0.75.

    Here is code that goes with the drop down box :

    Code:
    <td height="49" align="right"><label for="Pizza_Size">Size</label>
          <select name="Pizza_Size" id="Pizza_Size" onchange = "SetToppingPrice()" />
            <option value="Small_Pizza">Small ($4.99)</option>
            <option value="Medium_Pizza">Medium ($5.99)</option>
            <option value="Large_Pizza">Large ($7.99)</option>
            <option value="X_Large_Pizza">X-Large ($10.99)</option>
          </select></td>
    Here is the Javascript code:

    Code:
    // JavaScript Document
    function SetToppingPrice() {
    	var Pizza_Topping_Price = document.getElementById("Pizza_Size");
    	divOutput = document.getElementById("Display_Topping_Price");
    	if(Pizza_Topping_Price = "Small_Pizza") {
    		divOutput.innerHTML = "$0.75 per topping";}
    	else if (Pizza_Topping_Price = "Medium_Pizza") {
    		divOutput.innerHTML = "$1.00 per topping";}
    	else if (Pizza_Topping_Price = "Large_Pizza") {
    		divOutput.innerHTML = "$1.25 per topping";}
    	else if (Pizza_Topping_Price = "X_Large_Pizza") {
    		divOutput.innerHTML = "$1.50 per topping";}
    }
    Any advice is greatly appreciated.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    a) You don't have a <div id = "Display_Topping_Price"></div>

    b) You need to include an initial option

    <option value = "">Select Pizza size ....</option>

    as othwise the user cannot select (onchange) the Small Pizza

    c) var Pizza_Topping_Price = document.getElementById("Pizza_Size").value;

    d) = means assignment. == means comparison, so if(Pizza_Topping_Price = "Small_Pizza") { should be ==


    There are other improvements you can make. Long names such as Pizza_Topping_Price are prone to typos and are best simplfied to (say) PTP.

    Quizmaster: Gordon Brown compared himself which which character from Emily Bronte's "Wuthering Heights"?
    Contestant: Charles Dickens.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The <div> tag is there

    Code:
    <p align="center"><div id = "Display_Topping_Price"></div>&nbsp;</p>
    I will try the other suggestions and see if they work.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works now...thank you!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •