Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Krystel Hagan
Krystel Hagan
4,731 Points

Multiplication calculator help

I'm trying to create a calculator for work. The main thing I'm having trouble with is actually getting a result. The calculator doesn't seem to be functioning correctly as of now. I've taken screenshots of the code I have so far if they're needed. Any help or notes would be greatly appreciated!

Krystel Hagan
Krystel Hagan
4,731 Points

Here is the code for the HTML:

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <script src="CSS.css" type="text/CSS"></script>
    <script src="javascript-code.js" type="text/javascript"></script>
    <script src="jquery-script.js" type="text/javascript"></script>
    <title>Calculator</title>
</head>
<body>
<div id="leftside">
    <h2>Monkey Business ROI Calculator</h2>  

    <form action="" method="post" name="calculator">
    </div>
    <div id="rightside"></div>                  
    <div style="clear: both;"> </div>
    <h4 style="margin-top: 35px;"> Return on Investment Calculator </h4>
    <table>
    <tr style="text-align: left;"><th>Your Business</th></tr>
    <tr>

    <td><label for="hoursResult">Hours Spent Scheduling</label></td>
    <td><label for="hoursResult">
    <input type="text" class="right" id="hoursResult" size="5" value="0" /></label></td>
    </tr>

    <tr>
    <td><label for="costResult">Hourly Cost to Currently Schedule</label></td>
    <td><label for="costResult">$
    <input type="text" class="right" id="costResult" size="5" value="0.00" /></label></td>
    </tr>           

    <tr>
    <td><label for="totalResult">Estimated value of an online scheduler per month: </label></td>
    <td><label for="totalResult">$
    <input type="text" class="right" id="totalResult" size="5" value="" /></label></td>
    </tr>           

    <tr>
    <td align="left"><input type="button" value="Calculate Now!" onclick="calculate()"></td>
    <td align="center"><input type="reset" value="Reset"</td>
    </tr>
    </table>        

    </form>
</body>
</html>
Krystel Hagan
Krystel Hagan
4,731 Points

The Javacript:

<script type="text/javascript">
function calculate() {    

    var hoursValue = document.calculator.hours.value * 15;
    document.getElementById("hoursResult").value = hoursValue.toFixed(2);

    var costValue = document.calculator.cost.value * 2;
    document.getElementById("costResult").value = costValue.toFixed(2);



    var totalresult = hoursValue*costValue;
    document.getElementById("totalResult").innerHTML= totalresult.toFixed(2);



    if(isNaN(hoursValue)) {alert("Your response for hours spent contains a non-numeric character.
        Please re-enter your response.");}
    if(isNaN(costValue)) {alert("Your response for hourly cost contains a non-numeric character.
        Please re-enter your response.");}


}
</script>
Krystel Hagan
Krystel Hagan
4,731 Points

and the jquery:

<script type="text/javascript">
function calculate() {    


    var hoursValue = $("#hoursValue").val()*15
    $("#hoursResult").val(hoursValue.toFixed(2));

    var costValue = $("#costValue").val()*2;
    $("#costResult").val(costValue.toFixed(2));


    var totalresult = hoursValue * costValue; 
    $("#totalResult").val(totalresult.toFixed(2)); 


    var totalvalue=totalresult.toFixed(2);



    if(isNaN(hoursValue)) {alert("Your response for number of books borrowed contains a non-numeric character.
        Please re-enter your response.");}
    if(isNaN(costValue)) {alert("Your response for number of magazines borrowed contains a non-numeric character.
        Please re-enter your response.");}

}
</script>

6 Answers

Alan Johnson
Alan Johnson
7,625 Points

Hi Krystal! At least one odd thing I'm noticing here is that you're loading the vanilla javascript version of the calculate function and then redefining calculate with the jQuery version. Based on the order you're loading things, only the jQuery version of that function would ever be used. I'd start with removing one of those two versions, based on which one you actually want to use.

Beyond that, it could easily be that an error's coming up as your code is run. Are you seeing any error output in the Developer Tools Console?

Krystel Hagan
Krystel Hagan
4,731 Points

I removed the jquery script, and tried to calculate again, but it still didn't work. I'm currently not using a Developer Tools Console (other than Sublime?) How would I go about checking for errors that way? It's not showing any errors in my code when typing it into Sublime (as in missing tags, etc.)

Krystel Hagan
Krystel Hagan
4,731 Points

I removed the jquery script, and tried to calculate again, but it still didn't work. I'm currently not using a Developer Tools Console (other than Sublime?) How would I go about checking for errors that way?

Alan Johnson
Alan Johnson
7,625 Points

What browser are you using? That'll help me get you to the right spot in terms of seeing any errors that are showing up.

Krystel Hagan
Krystel Hagan
4,731 Points

I'm using Safari right now

Krystel Hagan
Krystel Hagan
4,731 Points

It's not showing any errors in my code when typing it into Sublime (as in missing tags, etc.)

Jimmy Hsu
Jimmy Hsu
6,511 Points

I took a brief look at your code and I think I found the issue.

<td><label for="hoursResult">Hours Spent Scheduling</label></td>
    <td><label for="hoursResult">
    <input type="text" class="right" id="hoursResult" size="5" value="0" /></label></td>
    </tr>

    <tr>
    <td><label for="costResult">Hourly Cost to Currently Schedule</label></td>
    <td><label for="costResult">$
    <input type="text" class="right" id="costResult" size="5" value="0.00" /></label></td>
    </tr>

The ID names and labels were incorrectly named with costResult/hoursResult instead of costValue/hoursValue. The JS was tripping up as costResult/hoursResult was nonexistent in the HTML.

 var hoursValue = $("#hoursValue").val()*15;
    $("#hoursResult").val(hoursValue.toFixed(2));

There still seems to be some logic errors (I only took a brief look) and I don't know exactly what the formula is, but that seems to be the main offending issue besides a missing semicolon.

Here is the code currently "working". http://codepen.io/anon/pen/hnLxb/

Krystel Hagan
Krystel Hagan
4,731 Points

That fixed it perfectly! Thanks so much!

Jimmy Hsu
Jimmy Hsu
6,511 Points

No problem, glad to help!

Krystel Hagan
Krystel Hagan
4,731 Points

Slight problem, when I open the page up in my browser (Safari currently) it still doesn't pull a result. I can't figure out why

Jimmy Hsu
Jimmy Hsu
6,511 Points

Are you still in codepen? It appears to work fine there.

Side note, there is no need to have both the javascript and jQuery versions active at the same time.

<script src="javascript-code.js" type="text/javascript"></script>
<script src="jquery-script.js" type="text/javascript"></script>

You also left out the actual jQuery library, I personally prefer Google CDN to download it. Together it should look like this:

<script src="jquery-script.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Now thinking about it, that probably is your issue.

I would recommend continuing through some of the tracks, specifically Front-end as it teaches a lot of the fundamentals of setting up sites and JavaScript.

Krystel Hagan
Krystel Hagan
4,731 Points

Yes it worked for me in codepen as well, then when I copied your code and put it into my Sublime file, it didn't work in the browser for some reason. Yeah I already took out the jQuery and just went with Javascript. Is that still one of my problems?

Jimmy Hsu
Jimmy Hsu
6,511 Points

I would use the jQuery instead of the regular javascript, mostly because it can keep the code simple to understand.

There should be no reason beyond that for it to not work. The code works fine on my Safari. Check to see if you might have missed something or rework through the logic of the code.

Krystel Hagan
Krystel Hagan
4,731 Points

So should I just copy what you wrote in CodePen into my jQuery file, instead of using the Javascript?

Jimmy Hsu
Jimmy Hsu
6,511 Points

Essentially, but it's best to review it before you do. The HTML portion was changed too, so check that part before you copy over as well.

Krystel Hagan
Krystel Hagan
4,731 Points

Alright, I've tried reviewing it and changing the things that needed to be changed, but it still won't give me an actual result when I open it up in the browser. SOS Halp

Jimmy Hsu
Jimmy Hsu
6,511 Points

What does it actually give? What do you mean by actual result? Maybe a screenshot could help.

Krystel Hagan
Krystel Hagan
4,731 Points

/Users/kry/Desktop/Screen Shot 2014-04-13 at 7.13.11 PM.png

Krystel Hagan
Krystel Hagan
4,731 Points

But essentially when I open the calculator in my browser, I'm able to input any amount into the boxes, but when I click the "Calculate Now!" button, it doesn't actually calculate anything and the "total" box remains blank

Krystel Hagan
Krystel Hagan
4,731 Points

I'm not sure how to post screenshots on here :/