当我点击一个按钮时，为什么在我的网站上显示的图像不会消失？

在我的程序中，我编写了几个函数，当您键入任意数量的持票人和补充通行证从1到550之后，在此之后，当您单击按钮“计算可用座位”时，它将显示：“The可用座位的数量是“然后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>

来源

2016-07-28 user_13439903

您还没有包括在网页上的jquery.js。如果没有这些，jQuery函数将无法正常工作... – nnnnnn

您的代码按预期在jsfiddle中运行。不过，我也认为@nnnnnn，你可能错过了将jquery库包含在脚本中。单击按钮时，查看是否有任何js错误显示在控制台中。 –

我应该然后创建一个新的.js文件并将其命名为jquery.js并将jquery代码放在那里，然后将它作为源文件放入我的html文件中？ –

您需要定义里面你的jQuery事件侦听器

$（document）.ready（function（）{

}）;

尝试下面的代码

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

来源

2016-07-28 04:38:35

OP包含JS的正文后面的元素，因此文档就绪处理程序是不必要的。 – nnnnnn

在这里你去。用户.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>

来源

2016-07-28 04:44:36

*问。为什么我的jQuery'.click（）'和'.hide（）'工作？* A.使用完全不同的非jQuery技术。（嗯...） – nnnnnn

@nnnnnn jQuery是JavaScript。我的答案可以与jQuery脚本共存。 –

这个问题明确指出，他的老师已经要求OP使用jQuery来做这件事，他问他为什么jQuery代码不起作用。（当然，如果没有它，其余的脚本都可以正常工作，那么仅仅使用jQuery就没有意义，但这仍然是明确的要求。） – nnnnnn

当我点击一个按钮时，为什么在我的网站上显示的图像不会消失？

回答

相关问题