We Keep Coding

I tried creating a image popup but failed badly here my script anyone can help me out

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND

replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">

Unable to append to a find element

I am running a check to see if the data-attribute, availability is Yes or No. If it is no, I am finding that specific .smallCatalogBlock and wanting to append the .soonOverlay on top of it.
As on now, the element is not being appended to .smallCatalogBlock. I have a console.log check in place to see if the condition is running successfully, and it is, with the correct number of found elements. The html just isn't being appended.
Does anyone see what I am doing wrong?
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).find('.smallCatalogBlock').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-availability="Yes">
<span class="smallCatalogTitle">A</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">B</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">C</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

It's because when you're using $(this), the object itself is the item with class .smallCatalogBlock. So when you run $(this).find('.smallCatalogBlock'), it tries to find an element with class smallCatalogBlock WITHIN the element with class smallCatalogBlock, and fails. Since it can't find, it can't append. It should work if you simply do $(this).append(...).

Click function on div inside div with click function

So I wanted to know how you could stop the outer divs click function, and only have the inner divs click function be triggered. But, I want to stay using the $(document).on('click',selector) method for use in my application. I have see a few answers, but none that work with that method. Maybe An oversight by me?
$(document).ready(function() {
$('.Name').text('A veery long namemmmmmmeehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeee');
$(document).on("click", ".task", function() {
alert("click");
});
$(document).on("click", ".Name", function() {
alert("click");
});
});
.one {
height: 495px;
flex-basis: 50%;
max-width: 50%;
min-width: 35%;
position: relative;
top: 20px;
margin-right: 20px;
margin-left: 10px;
outline: solid red 1px;
}
.two {
height: 210px;
top: 20px;
position: relative;
margin-left: 10px;
margin-right: 10px;
flex-basis: 50%;
max-width: 50%;
min-width: 15%;
outline: solid red 1px;
}
.flex {
height: 100%;
width: 100%;
display: flex;
}
.Box {
cursor: pointer;
width: 85%;
padding-left: 8px;
}
.Name {
margin: 0px;
width: 85%;
max-height: 25px;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.Date {
margin: 0px;
}
.task {
width: 100%;
height: 55px;
cursor: pointer;
background-color: white;
border-top: solid #eaeaea 1px;
border-bottom: solid #eaeaea 1px;
}
.Details {
position: relative;
top: 10%;
display: inline-block;
margin-left: 15px;
width: 85%;
}
.three {
height: 210px;
top: 20px;
position: relative;
margin-left: 10px;
margin-right: 10px;
flex-basis: 50%;
max-width: 50%;
min-width: 35%;
outline: solid red 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
<div class="one">
one
<div class="task task-container" data-type="yes">
<div class="Details">
<div class="Box">
<p class="Name">A very long nameeeeeeeeeeeeeeeeeeeeeeeeeeeeemmmmmmmmmmmmmmmmee</p>
<p class="Date">Due: 4/10/2018</p>
</div>
</div>
</div>
</div>
<div class="two">
two
</div>
<div class="three">
three
<div class="task task-container" data-type="yes">
<div class="Details">
<div class="Box">
<p class="Name"></p>
<p class="Date">Due: 4/10/2018</p>
</div>
</div>
</div>
</div>
</div>
LINK- https://jsfiddle.net/t29ffzan/35/

First you need to capture the event within the function call:
function(event) {}
Next you call a function to stopPropagation within the function, like so:
$(document).on("click", ".Name", function(event) {
event.stopPropagation()
alert("click");
});
docs

In your second event handler, do the following:
$(document).on("click", ".Name", function(e) {
e.stopPropagation();
alert("click");
});
It will prevent the event from bubbling, i.e. being also called on parent tags.
Look here for moar info: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

In the click handler for the inner element, stop the click from propagating outward (bubbling up).
$(document).on("click", ".task", function() {
alert("click");
});
$(document).on("click", ".Name", function(e) {
e.stopPropagation();
alert("click");
});
https://jsfiddle.net/t29ffzan/36/

how to trigger an event for an element when some other element is clicked in jQuery?

here is my code: https://jsfiddle.net/2vvLe0ko/2/
I want to hide div with class droppointercontainer when the user clicks any other region except click me! div. and show the droppointercontainer div when the user clicks the click me! div.
how to do that with jQuery?
html:
<body>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
</body>
css:
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
javascript:
$("#click1").on("click", function(){
$(this).children("#droppointercontainer1").fadeIn(200);
});
$("#click2").on("click", function(){
$(this).children("#droppointercontainer2").fadeIn(200);
});

You need to call a function that does the job for all clicks...
Edited and added a working proof link.
$("#click1").on("click", function(){
showMe(this);
});
$("#click2").on("click", function(){
showMe(this);
});
$(document).on('click', function(__e){
if(!$(__e.target).hasClass('click')){
$('.droppointercontainer').fadeOut(200);
}
});
function showMe(__obj){
$('.droppointercontainer').each(function(__idx, __el){
if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
if($(__el).css('opacity') > 0){
$(__el).fadeOut(200);
}
}
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);
}
Proof
https://jsfiddle.net/2vvLe0ko/7/

Something like this should work
$(document).click(function(e) {
if (!$(e.target).is("#click1") && !$(e.target).is("#click2")) {
if ($('#click1').is(':visible') || $('#click2').is(':visible')) {
$(".droppointercontainer").hide();
}
}

You need to toggle them. For that you can use a variable for each:
var drop1,drop2=false;
$("#click1").on("click", function(){
drop1 ? $(this).children("#droppointercontainer1").fadeOut(200) :
$(this).children("#droppointercontainer1").fadeIn(200);
$("#droppointercontainer2").fadeOut(200);
drop1 = !drop1;
drop2=false;
});
$("#click2").on("click", function(){
drop2 ? $(this).children("#droppointercontainer2").fadeOut(200) :
$(this).children("#droppointercontainer2").fadeIn(200);
$("#droppointercontainer1").fadeOut(200);
drop1=false;
drop2 = !drop2;
});

Is this what you looking for?
$(document).click(function(event) {
$(".droppointercontainer").hide();
if($(event.target).is(".click")) {
$(event.target).find(".droppointercontainer").show();
}
})
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>

To keep things simple, I'd go for a transparent overlay. When you click the overlay, the dropdown disappears. See fiddle here: https://jsfiddle.net/d6yv60od/
$(".click").on("click", function(){
$('body').append('<div class="overlay"></div>');
$(this).children(".droppointercontainer").fadeIn();
});
$('body').on('click', '.overlay', function() {
$(this).remove();
$(".droppointercontainer").fadeOut();
});
One advantage of this solution is that, in its simplicity, the dropdown remains open when you click on an iten. Unless you tell him to close of course, but this is another story :)

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.
The code works smoothly and perfectly, as shown below (minus the images)
<!DOCTYPE html>
<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<style>
html{
font-family: courier
}
.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}
.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative
}
#content{
padding-top: 50px
}
td{
width: 33.3%
}
table{
width: 100%;
text-align: center
}
.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}
.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
text-align: center;
padding-top: 40px;
}
#titleImage{
height: 200px
}
.selectionIcon{
height: 120px
}
#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}
#background{
width: 100%;
bottom: 0px
}
#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}
#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}
#exit:hover + #exitText{
font-size: 30px
}
#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}
#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}
.innerTitle{
font-size: 80px;
text-align: center
}
.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}
b{
font-size: 45px;
text-align: center
}
.quoteImage{
height: 50px;
width: 50px;
}
#summary{
border: 10px;
}
.quote{
color: black;
}
/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}
.floatRight > * {
float:right;
margin-left:5px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}
.characterPicture{
height: 140px;
width: auto
}
#summaryText{
text-align: center;
font-size: 80px
}
.characterText{
font-size: 25px;
}
.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}
#summaryItself{
padding: 10px
}
#schoolImage{
height: 290px;
width: auto
}
button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}
#options{
text-align: center
}
#apps{
text-align: center
}
#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}
</style>
<body>
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>
<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})
$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})
$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
</script>
</body>
<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>
<img src="images/logout.png" id="exit">
<p id="exitText">Exit</p>
<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>
<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>
<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
</html>
However, there is one set of lines that is not running properly:
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
^This is the DIV "#languageMenu", where the user selects his language.
Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.
http://jsfiddle.net/b58Lvtfy/1
From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.
Why might this be so and what amendments might make the code work better?
Online demo: http://garridpunching.neocities.org/malfunction.html

Put every event binding inside doc ready block:
$(document).ready(function() {
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
$("#about").on("click", function() {
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click", function() {
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click", function() {
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click", "#exit", function() {
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click", function() {
$("#languageMenu").fadeIn(500)
})
})
Because your button appears after event binding so no events bound on this element and cause as error. That is why it is always safe to put event bindings inside doc ready block.
Or you can shift your script to the closing of </body>.

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.