Michael Bao Michael Bao - 1 year ago 39
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() {

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() {

$("#btnSubmit").click(function() {

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">
<meta charset="utf-8">
<title>Airbus Seat Calculator</title>
DIV.movable { position:absolute;}



<h2>Airbus Seat Calculator</h2>

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

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

<input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
<img id="airbus" src="images/airbus.png" />

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



Answer Source

You need to define your jquery event listeners inside

$( document ).ready(function() {


try the below code

$( document ).ready(function() {
    $("#btnSubmit").click(function() {