Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted April 13, 2014 6:32pm by

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!

April 13, 2014 6:38pm

can you post your code?

April 13, 2014 6:40pm

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>

April 13, 2014 6:41pm

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>

April 13, 2014 6:42pm

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

April 13, 2014 7:36pm

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?

April 13, 2014 8:34pm

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.)

April 13, 2014 8:21pm

April 13, 2014 9:12pm

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.

April 13, 2014 9:46pm

I'm using Safari right now

April 13, 2014 8:22pm

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

April 13, 2014 11:58pm

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/

April 14, 2014 12:07am

That fixed it perfectly! Thanks so much!

April 14, 2014 12:12am

No problem, glad to help!

April 14, 2014 12:12am

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

April 14, 2014 12:18am

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.

April 14, 2014 12:30am

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?

April 14, 2014 12:43am

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.

April 14, 2014 12:51am

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

April 14, 2014 12:59am

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.

April 14, 2014 1:27am

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

April 14, 2014 1:58am

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

April 14, 2014 2:14am

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

April 14, 2014 2:57am

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

April 14, 2014 2:14am

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Krystel Hagan

Krystel Hagan

Multiplication calculator help

Stone Preston

Stone Preston

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

6 Answers

Alan Johnson

Alan Johnson

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Alan Johnson

Alan Johnson

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Jimmy Hsu

Jimmy Hsu

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan

Krystel Hagan