0

I'm new to java, so please bear with me. I took this code from this site, but for the life of me, I can't seem to get the javascript to actually run. Here is my code saved in both an html file and also a php file (the file format it will eventually need to go into, once I figure this issue out).

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(function () {
    $('.my-table input[type=number]').on("input", function() {
        var tr  = $(this).closest('tr');
        var num = +tr.find('.numerator').text();
        var val = this.value;

        tr.find('.rowtotal').text('£'+ (val * num));
    });
});
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
    </thead>
    <tbody>
        <tr data-row-num="1">
        <td>Item 1</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 2</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 3</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Here is the code using the snippet tool, and it runs just fine. So what am I doing wrong here that it's not working correctly when I save this as a file? I'm guessing it's a placement issue with the code itself, though I've tried to place it in the body, I've tried to use an include, and even tried to put it into the header. None of these showed any results. Any ideas?

$(function() {
  $('.my-table input[type=number]').on("input", function() {
    var tr = $(this).closest('tr');
    var num = +tr.find('.numerator').text();
    var val = this.value;

    tr.find('.rowtotal').text('£' + (val * num));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
    </thead>
    <tbody>
        <tr data-row-num="1">
        <td>Item 1</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 2</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 3</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>
Us Xpress
  • 11
  • 2
    You're using jQuery (`$(function() { ... }`) before it is even available (` – Andreas Aug 20 '17 at 14:34
  • Awesome, thank you for the link, but your short explanation was actually more informative than the link you provided to a person that is just starting out in java. – Us Xpress Aug 20 '17 at 15:01
  • It's JavaScript, not Java: [What's the difference between JavaScript and Java?](https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) – Andreas Aug 20 '17 at 15:03

0 Answers0