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 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Uncaught TypeError: cannot read property "checked" of undefined

    I posted this code a couple days ago but am having trouble with a different part of it now. Originally, the checkPizza() function was working and created an error message if the user tried to submit the form without selecting a pizza. Somewhere along the way it stopped working and I'm not sure why.

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Discovery 5-2</title>
    <style>
    h1, p {font-family: Tahoma, Verdana, Arial, sans-serif}
    .price {font-style: italic; color: #9E8118; font-size:small}
    </style>
    
    <script type="text/javascript">
    /* <![CDATA[ */
    function checkPizza() {
        var pizzaSelected = false;
        for (var i = 0; i < 7; ++i) {
            if (document.forms[0].pizzas[i].checked == true) {
                pizzaSelected = true;
                break;
            }
        }
        if (pizzaSelected != true) {
                window.alert("You must select a pizza to continue.");
                return false;
            }
    }//This is the function that isn't working
    
    function calcTotal() { 
        var total = 0;
        var veg = 13.79;
        var works = 14.29; 
        var triCh = 12.29;
        var tiki = 12.79;
        var carn = 13.79; 
        var basic = 10.29;
        var addOn = 1.09;
        for(var i = 0; i < 12; i++){
            if (document.forms[0].toppings[i].checked == true)
                total += addOn;}
        if (document.forms[0].pizzas[0].checked == true) {
            total += veg;}
        else if(document.forms[0].pizzas[1].checked == true){
            total += works;}
        else if(document.forms[0].pizzas[2].checked == true) {       
            total += triCh;}
        else if(document.forms[0].pizzas[3].checked == true){         
            total += tiki;}
        else if(document.forms[0].pizzas[4].checked == true){        
            total += carn;}
        else if(document.forms[0].pizzas[5].checked == true){
            total += basic;}
        document.forms[0].runningTotal.value = total.toFixed(2);
    }
    var vegetarian = "A garden fresh variety of onions, green peppers, mushrooms, black olives, roasted red peppers, artichoke hearts, and tomatoes"
    var theWorks = "For those who want the best of both worlds: Canadian bacon, sausage, and pepperoni with black olives, onions, green peppers, and mushrooms."  
    var triCheese = "A delectable blend of mozzarella, asiago, and provolone."
    var tikiC = "Tiki's personal favorite!  Savory slices of Canadian bacon and chunks of sweet, golden pineapple, piled high with Tiki's secret sauce."
    var carnivore = "Pepperoni, sausage, Canadian bacon, salami, and bacon make for a ferociously delicious dish for the animal in you"
    var theBasic = "A basic pie with classic tomato sauce and mozzarella cheese.  Perfect in its own simplicity or as a base for the toppings of your choice."
    /* ]]> */
    </script>
    </head>
    
    <body>
    <table rules="none">    
        <tr >
            <td colspan="3">
        <h1>Tiki's Takeaway</h1>
            </td>
        <tr>
            <td colspan="3">
        <p>Welcome to Tiki's Takeaway! Build your pizza from the menu options below. </p>
            </td>
        </tr>
        <tr>
            <td valign="top">
            <form method="post" onsubmit="return checkPizza();">
                    <p>Signature Pizzas<br/>
    //And these are the radio buttons that should be being evaluated by the function
        <input type="radio" name="pizzas" value="vegetarian" 
        onmouseover="document.forms[0].pizzaDesc.value=vegetarian"         
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange="calcTotal()"/>Vegetarian <span class="price">$13.79</span><br/>
    
        <input type="radio" name="pizzas" value = "works" 
        onmouseover="document.forms[0].pizzaDesc.value=theWorks" 
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange = "calcTotal()"/>The Works<span class="price">$14.29</span><br/>
    
        <input type="radio" name="pizzas" value="triple_cheese" 
        onmouseover="document.forms[0].pizzaDesc.value=triCheese" 
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange="calcTotal()"/>Triple Cheese<span class="price">$12.29</span><br/>
    
        <input type="radio" name="pizzas" value="Tiki's_Classic" 
        onmouseover="document.forms[0].pizzaDesc.value=tikiC" 
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange="calcTotal()"/>Tiki's Classic <span class="price">$12.79</span><br/>
    
        <input type="radio" name="pizzas" value="carnivore" 
        onmouseover="document.forms[0].pizzaDesc.value=carnivore" 
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange="calcTotal()"/>Carnivore<span class="price">$13.79</span><br/>
    
        <input type="radio" name="pizzas" value="basic" 
        onmouseover="document.forms[0].pizzaDesc.value=theBasic" 
        onmouseout="document.forms[0].pizzaDesc.value=null" 
        onchange="calcTotal()"/>The Basic<span class="price">$10.29</span><br/>
        </p>
            </td>
            <td colspan="2" valign="top">
            <p>
            <br/><br/>
            <textarea name="pizzaDesc" cols="74" rows="2" style="background-color: Transparent; border: none; overflow: hidden; font: 14px tahoma; color:#9E8118; font-style:italic"></textarea></p>
            </td>
        </tr>
        <tr>
            <td width="230px"> 
        <p>Additional Toppings <span class="price">$1.09 each</span><br/>
        <input type = "checkbox" name = "toppings"
            value = "pepperoni" onchange="calcTotal()" />Pepperoni <br />
        <input type = "checkbox" name = "toppings"
            value = "banana_peppers" onchange="calcTotal()"/>Banana Peppers <br />
        <input type = "checkbox" name = "toppings"
            value = "anchovies" onchange="calcTotal()"/>Anchovies <br />
        <input type = "checkbox" name = "toppings"
            value = "onions" onchange="calcTotal()"/>Onions <br />
        <input type = "checkbox" name = "toppings"
            value = "mushrooms" onchange="calcTotal()"/>Mushrooms<br />
        <input type = "checkbox" name = "toppings"
            value = "green_peppers" onchange="calcTotal()"/>Green peppers<br />
            </td>
            <td width="230px">
            <br/>
            <p>
        <input type = "checkbox" name = "toppings"
            value = "Canadian_bacon" onchange="calcTotal()"/>Canadian bacon <br />
        <input type = "checkbox" name = "toppings"
            value = "cheese" onchange="calcTotal()"/>Cheese <br />
        <input type = "checkbox" name = "toppings"
            value = "pineapples" onchange="calcTotal()"/>Pineapple <br />
        <input type = "checkbox" name = "toppings"
            value = "spinach" onchange="calcTotal()"/>Spinach <br />
        <input type = "checkbox" name = "toppings"
            value = "black_olives" onchange="calcTotal()"/>Black Olives <br />
        <input type = "checkbox" name = "toppings"
            value = "sausage" onchange="calcTotal()"/>Sausage<br />
            </p>
            </td>
            <td>
            <br/>
            <p>
        <input type = "checkbox" name = "toppings"
            value = "Canadian_bacon" onchange="calcTotal()"/>Artichoke hearts <br />
        <input type = "checkbox" name = "toppings"
            value = "cheese" onchange="calcTotal()"/>Salami <br />
        <input type = "checkbox" name = "toppings"
            value = "pineapples" onchange="calcTotal()"/>Bacon <br />
        <input type = "checkbox" name = "toppings"
            value = "spinach" onchange="calcTotal()"/>Roasted red peppers <br />
        <input type = "checkbox" name = "toppings"
            value = "black_olives" onchange="calcTotal()"/>Tomatoes <br />
        <input type = "checkbox" name = "toppings"
            value = "sausage" onchange="calcTotal()"/>Provolone <br />
            </p>
            </td>
        <tr>
            <td colspan="3">
        <p>Total<br />
        <textarea name="runningTotal" cols="10" rows="1" value="0" ></textarea><br /> </p>
        <input type = "submit" value = "Submit" />&nbsp; <input type = "reset" />
        </form>
            </td>
        </tr>
    </table>
    
    </body>
    
    </html>
    The error console says that it cannot read the property "checked", but I don't know why not. It was working before and I haven't changed anything that I know of, so I'm not sure what's causing the problem.

    Any and all help will be GREATLY appreciated!
    Last edited by taypandt; 09-19-2012 at 04:25 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Simple: You have 6 radio buttons. They will be numbered from 0 to 5. Right?

    But look at your loop:
    Code:
        for (var i = 0; i < 7; ++i) {
            if (document.forms[0].pizzas[i].checked == true) {
    Then i gets up to 6 (still less than 7!), there is no such radio button. *KABLOOEY*.

    You should *NEVER* hard code the end of a loop like that.

    But the whole function is over-complicated. Let's rewrite it.
    Code:
    function checkPizza(form) {
        var buttons = form.pizzas;
    
        for (var i = 0; i < buttons.length; ++i) {
            if ( buttons[i].checked ) { return true; }
        }
        window.alert("You must select a pizza to continue.");
        return false;
    }
    Notice that now the function is expecting a reference to the form to be passed in. You do that by changing your <form> tag thus:
    Code:
     <form method="post" onsubmit="return checkPizza(this);">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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