Trying to move JS from HTML file to it's own file

I have a bunch of javascript between <script> tags in an html file and I'm trying to move it to it's own file to make it a little more organized.

I pasted the javascript like so into a file called dashboard.js located in the same folder as the html(.hbs) file:

$('#bidButton').on('click', function(e) {
  var bidAmount = $("#bidAmount").val() * 100;
  var bidAmount2 = $("#bidAmount").val();
  var bidDisplayAmount = parseFloat(Math.floor($("#bidAmount").val() * 100) / 100).toFixed(2);
  var credits = $("#credits").val();
  var bidPlusFive = $("#bidPlusFive").val();
  if (parseFloat(credits) < 0) {
    $(".success-messages").fadeOut();
    return $(".error-messages").text("Please add funds to your account before bidding.").fadeIn();
  } else if (bidAmount < bidPlusFive * 100) {
    $(".success-messages").fadeOut();
    return $(".error-messages").text("Must bid $" + bidPlusFive + " or more!").fadeIn();
  } else if (!isNaN(bidAmount)) {
    $(".error-messages").fadeOut();
    $.post("/bid/bid", {
        bidAmount: bidAmount2
      },
      function(data, status) {
        $(".error-messages").fadeOut();
        $(".success-messages").text("Congratulations! You're the highest bidder!").fadeIn();
        $("#currentBid").hide();
        $("#currentBid2").show();
        $("#currentBid3").text(bidAmount2).show();
        $("#newBidPlusFive").hide();
        $("#newBidPlusFive2").show();
        $("#newBidPlusFive3").text(parseFloat(bidAmount2) + 5).show();
      });
  } else {
    return $(".error-messages").text("Invalid amount").fadeIn();
  }

});

I then put this line of code in the html file:

<script src="dashboard.js"></script>

I'm not sure what I'm doing wrong.

Also, when I load the page in the browser, I'm getting a console error of: SyntaxError: expected expression, got '<'. So, for some reason, my hbs layout template is getting rendered in the js file instead of the js.

via kolbykskk