Q:

Why is my image that is displayed on my website not disappearing when I click on a button using several functions I have written?

In my program, I wrote several functions so that when you typed any number of ticket holders and complementary passes from 1 to 550, and after that, when you clicked on the button "Calculate Available Seats", it would display : "The number of available seats is " and then 555 minus the number of ticket holders and complementary passes. In addition, I also wanted the image of the airplane below to disappear as soon as I click on the "Calculate Available Seats" button. As a result, I use jQuery (because my teacher wanted me to) to make the image disappear when I clicked on that button, which is this: 
$("#btnSubmit").click(function() {
    $('#airbus').hide();
});

However, when I loaded the webpage and tested it, the image would not disappear when I clicked on the "Calculate Available Seats" button. What am I doing wrong here?
Here is my airbus.js file:
var name = "Michael Bao";
var copyrightdate = 2016;

function copyright() {
    console.log(name, copyrightdate);
}

var TicketHolders1 = document.getElementById("txtTickets");
var ComplementaryPasses1 = document.getElementById("txtPasses");

function number_of_available_seats(TicketHolders, ComplementaryPasses) {
      var answer = 555 - (parseInt(TicketHolders) + parseInt(ComplementaryPasses));
        return("The number of available seats is " + answer);
    }

    function showresults(TicketHolders, ComplementaryPasses) {
        document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses);
    }

    var button = document.getElementById("btnSubmit");

    function clickonbutton(){
     var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
     var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;
     showresults(TicketHolders, ComplementaryPasses);
    }

    button.onclick = function() {
    clickonbutton();
    };

    $("#btnSubmit").click(function() {
        $('#airbus').hide();
    });

TicketHolders1.onblur = function() {
    if (TicketHolders1.value == "") {
        TicketHolders1.value = 0;
    }
};

ComplementaryPasses1.onblur = function() {
    if (ComplementaryPasses1.value == "") {
        ComplementaryPasses1.value = 0;
    }
};

And here is my airbus.html file:
<!DOCTYPE html>
<!-- airbus.html -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Airbus Seat Calculator</title>
<style>
DIV.movable { position:absolute;}
</style>

</head>

<body>

  <h2>Airbus Seat Calculator</h2>

  <form id="formTest" method="get" action="processData">
    <table>

    <tr>
      <td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td>
      <td><input type="text" id="txtTickets" name="tickets"></td>
    </tr>
    <tr>
      <td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td>
      <td><input type="text" id="txtPasses" name="passes"></td>
    </tr>

    <tr>
      <td>&nbsp;</td>
      <td>
          <input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
    </tr>
    </table>
  </form>
<img id="airbus" src="images/airbus.png" />

<div id="results">  
</div>
<h2>Michael Bao
    2016</h2>
<script src="airbus.js">

</script>

</body>
</html>

A:

You need to define your jquery event listeners inside 

$( document ).ready(function() {
});

try the below code 
$( document ).ready(function() {
    $("#btnSubmit").click(function() {
      $('#airbus').hide();
   });
});

