为什么当我使用我写的几个功能点击按钮时，我的网站上显示的图像没有消失

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

本文关键字：我的 网站 按钮 显示 图像 消失 功能 为什么 几个      更新时间：2023-09-26

在我的程序中，我编写了几个函数，这样当你键入从1到550的任何数量的持票人和补充通行证时，然后当你点击"计算可用座位"按钮时，它会显示："可用座位的数量是"，然后555减去持票人的数量和补充通行证件的数量。此外，我还希望在点击"计算可用座位"按钮后，下面飞机的图像立即消失。因此，当我点击按钮时，我使用jQuery（因为我的老师希望我这样做）使图像消失，这就是：

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

然而，当我加载网页并测试它时，当我点击"计算可用座位"按钮时，图像不会消失。我在这里做错了什么？

这是我的airbus.js文件：

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;
    }
};

这是我的airbus.html文件：

<!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>

您需要在中定义jquery事件侦听器

$（document）.ready（function）｛

})；

试试下面的代码

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

开始吧。用户.classList.toggle。

var pic = document.getElementsByTagName('img')[0];
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener("click", function(){
    pic.classList.toggle('hide');
});
img{
  height: 48px;
}
.hide{
  display:none;
}
<img src="http://simpleicon.com/wp-content/uploads/android.svg" alt="test">
<button>Test</button>

相关文章：