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

JavaScript

Krystel Hagan
Krystel Hagan
4,731 Points
Posted by Krystel Hagan
Krystel Hagan
4,731 Points

Multiplication Calculator help (part 2)

So far I've gotten the code for my calculator to work in CodePen (http://codepen.io/anon/pen/rJHpi/), it even gives me a result when I input any numbers, and the press the Calculate button. But for some reason when I copy/paste the same code into my own files in Sublime and open them in my browser, it doesn't give me a result the same way it does in CodePen. The same code also does not work in JSFiddle (http://jsfiddle.net/VyT9k/). Here is the link for my original post: https://teamtreehouse.com/forum/multiplication-calculator-help

Any further help would be greatly appreciated!

1 Answer

Geoff Parsons
Geoff Parsons
11,679 Points

My guess is that you'll need to include jQuery when running this locally. Easiest (and arguably laziest) way is to add one of Google's hosted versions in the head of your document like so:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points

Okay, that makes sense. Except when I put that exact line into my head, it still doesn't calculate a result and the box remains blank.

This is how I currently have it written in my HTML file:

<script src="CSS.css" type="text/CSS"></script>
<script src="jquery-script-2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Am I doing something wrong still? I'm pretty positive that I have everything written correctly

Geoff Parsons
Geoff Parsons
11,679 Points

Ah, might be that you have two copies of jQuery loading there. If you already have jQuery locally you can get red if the one from googleapis.com. Multiple copies of jQuery can bump into each other and make things act weird.

With just one script tag to include jQuery i was able to copy-paste your code with no issues. For reference this is what i have working on my end:

<html>
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript">
        function calculate() {
            var hoursValue = $("#hoursValue").val()*1;
            $("#hoursResult").val(hoursValue.toFixed(2));

            var costValue = $("#costValue").val()*1;
            $("#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>
    </head>
    <body>
        <div id="leftside">
          <h2>Monkey Business ROI Calculator</h2>
        </div>


        <form action="" method="post" name="calculator">
      <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="hoursValue">Hours Spent Scheduling</label></td>
      <td><label for="hoursValue">
      <input type="text" class="right" id="hoursValue" size="5" value="0" /></label></td>
      </tr>

      <tr>
      <td><label for="costValue">Hourly Cost to Currently Schedule</label></td>
      <td><label for="costValue">$
      <input type="text" class="right" id="costValue" 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>
        </div>
    </body>
</html>
Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points

Awesome, it turns out that was exactly my problem! You sir, are a lifesaver! :D

Geoff Parsons
Geoff Parsons
11,679 Points

Glad you were able to get it figured out, good luck!