CODEWITHSUNDEEP
javascripthtmlcssvariables
Brandon Durst
Brandon Durst

Reputation: 71

I have a variable in javascript that is not being set to the proper value

<html>
<head>
<script language="JavaScript">
    var pizza = 0;
    var tops = 0;
    var count = 0;
    var total = 0;
    var subtotal = 0;
    var tax = 0;
    var cheesecost = 0;

    function getcheese(yesno) {
        switch (yesno) {
            case 1:
                if (type == 1) {
                    cheesecost = 1;
                }
                if (type == 2) {
                    cheesecost = 1;
                }
                if (type == 3) {
                    cheesecost = 1.25;
                }
                if (type == 4) {
                    cheesecost = 1.4;
                }
                break;
            case 2:
                cheesecost = 0;
                break;
        }
    }

    function calc() {
        count = document.getElementById("toppingbox").value;
        subtotal = pizza + (tops * count) + cheesecost;
        tax = parseFloat(subtotal) * .06;
        total = parseFloat(tax) + parseFloat(subtotal);
        alert(cheesecost);
        document.getElementById("taxbox").value = tax.toFixed(2);
        document.getElementById("subtotalbox").value = subtotal.toFixed(2);
        document.getElementById("totalbox").value = total.toFixed(2);
    }

    function gettype(type) {
        if (type == 1) {
            pizza = 4;
            tops = .5;
        }
        if (type == 2) {
            pizza = 7.25;
            tops = .6;
        }
        if (type == 3) {
            pizza = 9.25;
            tops = .75;
        }
        if (type == 4) {
            pizza = 12.9;
            tops = .9;
        }
    }
</script>
</head>
<body style="padding-top: 64px; background-color: #e6e6e6">
    <center>
        <h1>Online Pizza Order Form</h1>
    </center>
    <hr noshade="noshade" style="text-align: center;width: 35%; height: 6px; color: gray; border-style: ridge; border-color: grey; border-width: 2px">
    <form>
        <div style="text-align: center;">
            <div style="text-align: center; padding-left: 24px; padding-top: 16px; padding-right: 24px; padding-bottom: 16px; border-width: 2px; border-style: ridge; background-color:#d8d8d8; width:28%; margin-bottom: 4px;">
                <hr noshade="noshade" style="text-align: center; margin-top:-12px; height: 2px; color: gray; border-style: ridge; border-width: 2px"> <b>Select the pizza type</b>
                <br>
                <div style="padding-left: 64px; text-align: left; padding-top: 12px; padding-bottom: 12px;">
                    <table border="0">
                        <tr>
                            <td>1. 6' - $4.00</td>
                            <td>
                                <input type=radio name=pizzatype value="1" onclick="gettype(this.value)">
                            </td>
                        </tr>
                        <tr>
                            <td>2. 10' - $7.25</td>
                            <td>
                                <input type=radio name=pizzatype value="2" onclick="gettype(this.value)">
                            </td>
                        </tr>
                        <tr>
                            <td>3. 14' - $9.25</td>
                            <td>
                                <input type=radio name=pizzatype value="3" onclick="gettype(this.value)">
                            </td>
                        </tr>
                        <tr>
                            <td>4. 16' - $12.90</td>
                            <td>
                                <input type=radio name=pizzatype value="4" onclick="gettype(this.value)">
                            </td>
                        </tr>
                    </table>
                </div>
                <hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
                <!-- START TEXT INPUTS -->
                <table border="0">
                    <tr>
                        <td style="font-weight: bold;">How many toppings do you want?</b>&nbsp;</td>
                        <td style="font-weight: bold;">
                            <input id="toppingbox" type="text" style="width:50px;" />
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Do you want extra cheese?</td>
                        <td style="font-weight: bold;">Yes
                            <input type=radio name=checkcheese value="1" onclick="getcheese(this.value)">
                            <br>No
                            <input type=radio name=checkcheese value="2" onclick="getcheese(this.value)">
                        </td>
                    </tr>
                </table>
                <!-- END TEXT INPUTS -->
                <!-- CALCULATE BUTTON -->
                <hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
                <div style="text-align: center;">
                    <button onclick="calc()">Calculate</button>
                </div>
                <hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
                <!-- END CALCULATE BUTTON -->
                <!-- START TOTALS -->
                <table border="0">
                    <tr>
                        <td style="font-weight: bold;">Subtotal:</td>
                        <td>$
                            <input id="subtotalbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd; font-weight:bold;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">Tax Due:</td>
                        <td>$
                            <input id="taxbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">Total Due:</td>
                        <td>$
                            <input id="totalbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd;" />
                        </td>
                    </tr>
                </table>
                <!-- END TOTALS -->
                <hr noshade="noshade" style="text-align: center; margin-bottom:-8px; margin-top: 12px; height: 2px; color: gray; border-style: ridge; border-width: 2px">
            </div>
        </div>
    </form>
    <hr noshade="noshade" style="text-align: center; width: 35%; height: 6px; color: gray; border-style: ridge; border-color: grey; border-width: 2px">
</body>

</html>

the cheesecost variable is supposed to change depending on the pizza size. when the yes/no radio button is checked, it is supposed to either set the cheesecost to 0, or set it to the cheese price related to that specific pizza size. ive been stuck on this for 3 days now, and ive tried about 12 different ways of doing this. none of them seem to work. for some reason the alert that displays the cheese cost is always zero, why is this?

Upvotes: 0

Views: 195

Answers (2)

user2189814
user2189814

Reputation: 21

why using function and case?

`switch(yesno){ case 1:

      cheesecost = 1;
      break;
  case 2:
      cheesecost = 1;
      break;
  case 3:
      cheesecost = 1.25;
   ....
   default:
     system.out.print("wt* have u entered");`

You get an error because type is not defined.

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

You've forgotten to add the break; statement at the end of each case.

It should be:

case 1:
    {
        if(type==1)
        {
            cheesecost=1;
        }
        if(type==2)
        {
            cheesecost=1;
        }
        if(type==3)
        {
            cheesecost=1.25;
        }
        if(type==4)
        {
            cheesecost=1.4;
        }
        break;
    }
    case 2:
    {
        cheesecost=0;
        break;
    }
}

Upvotes: 4

Related Questions