current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm new to Javascript and am taking a class to learn more. Part of my homework was to make a button, that on click prompts you for how many cookies you want. Then gives you a total. The per cookie price is conditional on the amount of cookies bought.

This is what I have. When I try debuggers I'm told my else statement on line 25 in undefined.

So basically it loops through and then gives Total: $NaN and doesn't stop the loop.

Any help would be appreciated.

    <script>
        function buyCookies()
        {
            var numCookiesP = document.getElementById("numCookies");
            numCookiesP.innerHTML = parseInt (prompt("How many cookies would you like to buy?"));

            if(numCookies <= 5)
            {
                document.write("Total: $" + (numCookies * 1.25)).toFixed(2);
            }
            else if(numCookies <= 11)
            {
                document.write("Total: $" + (numCookies * 1.15)).toFixed(2);
            }
            else
            {
                document.write("Total: $" + (numCookies * 1.00)).toFixed(2);
            }

        }

    </script>
</head>
<body>
    <input type="button" value="Cookies" onclick="buyCookies()">

    <div>
        <p id="numCookies"</p>

    </div>
share|improve this question
    
You want to assign the result of the prompt to the numCookies variable, not to numCookiesP.innerHTML? –  Bergi Apr 29 '13 at 21:57
    
"doesn't stop the loop" - I don't see any loop in your code? –  Bergi Apr 29 '13 at 21:57
    
I mean it doesn't finish loading. Not looping. –  Sage K Apr 29 '13 at 22:07
    
Your call: document.write("Total: $" + (numCookies * 1.00)).toFixed(2); Does that look OK? Match the parentheses and see what is passed to document.write. What is returned? Can you call ".toFixed(2)" on the result of calling document.write? –  Steve H. Apr 29 '13 at 22:08
    
I need to prompt "how many cookies do you want to buy" take that user input and multiply it by a cookie price depending on how many they are buying and then write the total in a div tag. I'm sure I'm doing it wrong and maybe I'm naming variables wrong on missing one. –  Sage K Apr 29 '13 at 22:08

2 Answers 2

up vote 0 down vote accepted

There are two problems:

  • you can't use document.write in an already loaded document - calling it will overwrite the current document. Setting innerHTML (or similar DOM manipulations) are the way to go. document.write is only for writing script tags or similar directly into the html parser stream when loading the document - you never really will use it.
  • You didn't declare and initialise the numCookies variable - it doesn't contain the parsed number from the prompt, so the calculations yield NaN.

I guess you want this:

function buyCookies() {
    var numCookiesP = document.getElementById("numCookies");
    var numCookies = parseInt(prompt("How many cookies would you like to buy?"), 10);
    var factor = 1.0;
    if (numCookies <= 5) {
        factor = 1.25;
    } else if (numCookies <= 11) {
        factor = 1.15;
    }
    numCookiesP.innerHTML = "Total: $" + (numCookies * factor).toFixed(2);
}
share|improve this answer
    
Thank you! This worked brilliantly. We are at the point where we are supposed to forget doc.write and move on to DOM manipulations. But this is the first assignment that calls for it. So I ran into some trouble. –  Sage K Apr 29 '13 at 22:41
up vote 0 down vote

There's probably a few other things you'd want to tweak, but the following should at least clear up the $NaN:

<script>
        function buyCookies()
        {
            var numCookies = parseInt (prompt("How many cookies would you like to buy?"));
            var numCookiesP = document.getElementById("numCookies").innerHTML;

            if(numCookies <= 5)
            {
                document.write("Total: $" + (numCookies * 1.25).toFixed(2));
            }
            else if(numCookies <= 11)
            {
                document.write("Total: $" + (numCookies * 1.15).toFixed(2));
            }
            else
            {
                document.write("Total: $" + (numCookies * 1.00).toFixed(2));
            }

        }

    </script>
</head>
<body>
    <input type="button" value="Cookies" onclick="buyCookies()">

    <div>
        <p id="numCookies"></p>

    </div>
share|improve this answer
    
Fixed that and it's still giving me Total: $NaN and keeps looping. –  Sage K Apr 29 '13 at 22:05
    
There were a couple of other issues, but the above should work. –  Kevin Bluer Apr 29 '13 at 22:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.