JavaScript Debugging

[Judahnator]

Your all going to laugh at me for not being able to figure this out, but im having a bit of trouble.

 

I have this script:

var $form = $('#mtw_base_sum'),
    $summands = $form.find('.mtw_base_count'),
    $sumDisplay = $('#mtw_base_sum');

$form.delegate('.mtw_base_count', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

being applied to this code:

<div id='mtw_base_sum'>
  <table style="width: 75%">
     <tbody>
        <tr>
           <th style="width: 50%">Item</th>
           <th style="width: 25%">Quantity</th>
           <th style="width: 25%">Pre-Discount Price</th>
        </tr>
        <tr>
           <td>Base Cabinets</td>
           <td><input class="mtw_base_count" name="mtw_base[1456344443]" type="number"></td>
           <td align="center">$125</td>
        </tr>
        <tr>
           <td>Upper Cabinets</td>
           <td><input class="mtw_base_count" name="mtw_base[1456344474]" type="number"></td>
           <td align="center">$117</td>
        </tr>
        <tr>
           <td>Tall Cabinets</td>
           <td><input class="mtw_base_count" name="mtw_base[1456344514]" type="number"></td>
           <td align="center">$185</td>
        </tr>
        <tr>
           <td>Drawers</td>
           <td><input class="mtw_base_count" name="mtw_base[1456378085]" type="number"></td>
           <td align="center">$20</td>
        </tr>
        <tr>
           <td>Doors</td>
           <td><input class="mtw_base_count" name="mtw_base[1456378119]" type="number"></td>
           <td align="center">$5</td>
        </tr>
     </tbody>
  </table>
  <input name="mtw_base_sum" type="number">
</div>

My problem is the sum of the inputs is not being printed into the final field.
 

I get an error that reads:

TypeError: $ is not a function

 

Any ideas?

Thanks in advance!

 

[colonel_mortis]

You have included jQuery in the page above your script, right? The error seems to suggest that it hasn't loaded, or that it's been overridden by something else.

[Judahnator]

33 minutes ago, colonel_mortis said:

You have included jQuery in the page above your script, right? The error seems to suggest that it hasn't loaded, or that it's been overridden by something else.

Let me check on that.

In any case, I basically copy-pasted the code from here: http://jsfiddle.net/bT4nm/6/

[Judahnator]

Yes, jQuery is loaded and seems to be working. Any ideas on why its not working?

[jslowik]

Are you trying to track the dollar sum? If so you have a logic error as well. Currently tracking the sum of units sold. I'm not currently sure what error you're getting, as I'm not seeing it.

 

The code doesn't work at all on my system, but it's not blowing up.

 

I'll try to do better a little later if nobody else comes forward before I get home. Sorry.

 

Edit:

 

Do you have the script tags in this order? With your custom below the jQuery one? I know it was asked, but I get no errors at all.

 

<script src ="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="custom.js"></script>

 

[Judahnator]

5 hours ago, jslowik said:

Are you trying to track the dollar sum?

 

Yes, and thinking about it I have been trying to calculate the wrong thing this whole time

 

Its late so im not going to be able to be very productive, but ill double check my code in the morning

[colonel_mortis]

7 hours ago, Judahnator said:

Let me check on that.

In any case, I basically copy-pasted the code from here: http://jsfiddle.net/bT4nm/6/

Jsfiddle adds jquery in the background, without a tag for it, but if you're copying it to your own page, you need to manually add it using:

 

5 hours ago, jslowik said:

 

Do you have the script tags in this order? With your custom below the jQuery one? I know it was asked, but I get no errors at all.

 

<script src ="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="custom.js"></script>