Forum:

HTML Pages with CSS and JavaScript

NaN

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I can't seem to get my function right.....It's a tuition calculator. At this point the residency and semesters don't matter. It's just credits * credit cost, but it keeps returning NaN.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
        <title>Greendale Community College</title>
    <script type="text/javascript">
        /* <![CDATA[ */
        /* ]]> */
        var numCredits = 0;
        var creditCost = 302;
        var instate = 0;
        var outstate = 0;
        var international = 0;
        var tuitionCost = number;
        function calcTuition(numCredits, creditCost) {
            var tuitionCost = numCredits * creditCost;
            document.write("Your tuition cost is $" + tuitionCost);
        }
    </script>
    </head>
    <body>
        <p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
        <center><img src="greendale.jpg" alt="greendale" width="512" height="256"/></center>
        <h1><center>Tuition Calculator</center></h1>
        <form name="calculator" action="" method="get">
        <h2>Semester</h2>
        <h3>(choose a semester)</h3>
            <input type="radio" name="semesterFall"/> Fall 2018 <br />
            <input type="radio" name="semesterSpring"/> Spring 2018 <br />
            <input type="radio" name="semesterSummer"/> Summer 2018 <br />
        <h2>Residency</h2>
        <h3>(choose your residency)</h3>
            <input type="radio" name="instate" /> In-State <br />
            <input type="radio" name="outstate" /> Out-of-State <br />
            <input type="radio" name="international" /> International <br />
        <h2>Credits</h2>
        <h3>(enter your number of credits)</h3>
            <input type="text" name="numCredits" size="2" onchange="calcTuition()"/> Credits <br />
            <input type="button" name="tuition" onclick="window.alert (calcTuition())" value="Calculate your Tuition" />
            </form>
    </body>
</html

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Your function expects two parameters yet you call it with none.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Your function expects two parameters yet you call it with none.

Are you referring to the arguments in the function? Should it be empty?

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

No. Your function is defined as:
which expects two arguments which it will multiply. If you pass nothing, it will multiply undefined by undefined and the result is clearly not a number (expressed as NaN).

[Asking smart questions] [About Bear] [Books by Bear]

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:No. Your function is defined as:function calcTuition(numCredits, creditCost) { var tuitionCost = numCredits * creditCost; document.write("Your tuition cost is $" + tuitionCost); }
which expects two arguments which it will multiply. If you pass nothing, it will multiply undefined by undefined and the result is clearly not a number (expressed as NaN).

Sorry I'm just a little confused by what you mean. In my mind, I set the variables as numbers. I appreciate your help, but I don't exactly know what you mean.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

In the following code, where do you pass two numbers?

You pass nothing.

What is it you want to be multiplying together? Those values need to be passed to the function.

[Asking smart questions] [About Bear] [Books by Bear]

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:In the following code, where do you pass two numbers?
onchange="calcTuition()"
You pass nothing.

What is it you want to be multiplying together? Those values need to be passed to the function.

Oh, I didn't realize you meant down there. So if I put the variables in the onchange, I will be alright?

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Still the same issue....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
        <title>Greendale Community College</title>
    <script type="text/javascript">
        /* <![CDATA[ */
        /* ]]> */
        var numCredits = 0;
        var creditCost = 302;
        var instate = 0;
        var outstate = 0;
        var international = 0;
        var tuitionCost = number;
        function calcTuition(numCredits, creditCost) {
            var tuitionCost = numCredits * creditCost;
            document.write("Your tuition cost is $" + tuitionCost);
        }
    </script>
    </head>
    <body>
        <p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
        <center><img src="greendale.jpg" alt="greendale" width="512" height="256"/></center>
        <h1><center>Tuition Calculator</center></h1>
        <form name="calculator" action="" method="get">
        <h2>Semester</h2>
        <h3>(choose a semester)</h3>
            <input type="radio" name="semesterFall"/> Fall 2018 <br />
            <input type="radio" name="semesterSpring"/> Spring 2018 <br />
            <input type="radio" name="semesterSummer"/> Summer 2018 <br />
        <h2>Residency</h2>
        <h3>(choose your residency)</h3>
            <input type="radio" name="instate" /> In-State <br />
            <input type="radio" name="outstate" /> Out-of-State <br />
            <input type="radio" name="international" /> International <br />
        <h2>Credits</h2>
        <h3>(enter your number of credits)</h3>
            <input type="text" name="numCredits" size="2" onchange="calcTuition(numCredits, creditCost)"/> Credits <br />
            <input type="button" name="tuition" onclick="window.alert (calcTuition(numCredits, creditCost))" value="Calculate your Tuition" />
            </form>
    </body>
</html>

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

No, those variables are undefined in the onchange handler.

It seems you are just guessing at this point; you need to ask yourself what values you want to actually pass into the function. When onchange triggers, what is it you actually want to have happen?

[Asking smart questions] [About Bear] [Books by Bear]

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:No, those variables are undefined in the onchange handler.

It seems you are just guessing at this point; you need to ask yourself what values you want to actually pass into the function. When onchange triggers, what is it you actually want to have happen?

Not guessing just trying to problem solve. I did some more research and made just changes, but am still at an I'm at an impasse.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
        <title>Greendale Community College</title>
    <script type="text/javascript">
        /* <![CDATA[ */
        /* ]]> */
        var creditCost = 302;
        function calcTuition() {
            var tuitionTotal = 0;
            var numCredits = number(calculator.credits.value);
            tuitionTotal = creditCost * numCredits;
            return tuitionTotal;
        }
        document.calculator.total.value = tuitionTotal;
    </script>
    </head>
    <body>
        <p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
        <center><img    /></center>
        <h1><center>Tuition Calculator</center></h1>
        <form name="calculator" action="" method="get">
        <h2>Semester</h2>
        <h3>(choose a semester)</h3>
            <input type="radio" name="semesterFall"/> Fall 2018 <br />
            <input type="radio" name="semesterSpring"/> Spring 2018 <br />
            <input type="radio" name="semesterSummer"/> Summer 2018 <br />
        <h2>Residency</h2>
        <h3>(choose your residency)</h3>
            <input type="radio" name="instate" /> In-State <br />
            <input type="radio" name="outstate" /> Out-of-State <br />
            <input type="radio" name="international" /> International <br />
        <h2>Credits</h2>
        <h3>(enter your number of credits)</h3>
            <input type="text" name="credits" size="2" /> Credits <br />
            <input type="button" name="tuition" onclick="window.alert(calcTuition())" value="Calculate your Tuition" />
            </form>
    </body>
</html>

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:No, those variables are undefined in the onchange handler.

It seems you are just guessing at this point; you need to ask yourself what values you want to actually pass into the function. When onchange triggers, what is it you actually want to have happen?

Trying getElementByID.....still nothing...ugh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
        <title>Greendale Community College</title>
    <script type="text/javascript">
        /* <![CDATA[ */
        /* ]]> */
        var creditCost = 302;
        function calcTuition(creditCost,numCredits) {
            var numCredits = document.getElementById(credits).value
            var tuitionTotal = 0;
            var tuitionTotal = creditCost * numCredits;
            document.write("Your Tuition Totals $ " + tuitionTotal);
        }
        
    </script>
    </head>
    <body>
        <p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
        <center><img    /></center>
        <h1><center>Tuition Calculator</center></h1>
        <form name="calculator" action="" method="get">
        <h2>Semester</h2>
        <h3>(choose a semester)</h3>
            <input type="radio" name="semesterFall"/> Fall 2018 <br />
            <input type="radio" name="semesterSpring"/> Spring 2018 <br />
            <input type="radio" name="semesterSummer"/> Summer 2018 <br />
        <h2>Residency</h2>
        <h3>(choose your residency)</h3>
            <input type="radio" name="instate" /> In-State <br />
            <input type="radio" name="outstate" /> Out-of-State <br />
            <input type="radio" name="international" /> International <br />
        <h2>Credits</h2>
        <h3>(enter your number of credits)</h3>
            <input type="text" name="credits" size="2" onchange="calcTuition(creditCost, numCredits)"/> Credits <br />
            <input type="button" name="tuition" onclick="window.alert(calcTuition(creditCost))" value="Calculate your Tuition" />
            </form>
    </body>
</html>

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

In order to use getElementById, the element must have an id. The name is not the same as an id. (name is only used for form submission, so you don't really even need one here.)

There is also getElementsByName if you want to continue to use names.

[Asking smart questions] [About Bear] [Books by Bear]

Daniel Martos

Ranch Hand

Posts: 126

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:In order to use getElementById, the element must have an id. The name is not the same as an id. (name is only used for form submission, so you don't really even need one here.)

There is also getElementsByName if you want to continue to use names.

Yes, I remember that now, but nothing is happening when I hit the button.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Any errors in the JavaScript console?

[Asking smart questions] [About Bear] [Books by Bear]

Who among you feels worthy enough to be my best friend? Test 1 is to read this tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing