Michael Bao Michael Bao - 4 months ago 6
Javascript Question

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>

Answer

You need to define your jquery event listeners inside

$( document ).ready(function() {

});

try the below code

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