Firefox писал этот код ошибки (ReferenceError: "x" is not defined)

HTML

<section class="modal modal-map">
<h2 class="visually-hidden">Как до нас добраться</h2>
<iframe width="766" height="560" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4491.477615428313!2d37.499406!3d55.74566707782676!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54db0ea67f855%3A0xe936c574c4332685!2z0J_QsNGA0Log0J7Qu9C40LzQv9C40LnRgdC60L7QuSDQlNC10YDQtdCy0L3QuA!5e0!3m2!1sru!2skz!4v1584958472234!5m2!1sru!2skz" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe><p>
<img src="img/map-modal.jpg" width="766" height="560" alt="Офис"></p>
<button class="modal-close" type="button">Закрыть</button> 
</section>
============================== Button
<a class="button contacts-button-map" >Как доехать</a>




=============================== CSS
.modal-map{
  display: none;
  top:50%;
  left:50%;
  width: 766px;
  height: 560px;
  transform: translate(-50%,-50%);
  border: 7px solid #fff;

}
.modal-map p{
  margin: 0;
}
.modal-show{
  display: block;
}

.modal-close{
  font-size: 0px;
  position: absolute;
  top: 0;
  right:-34px;
  width: 22px;
  height: 22px;
  background-color: transparent;
  cursor: pointer;
  border:0px;
}
.modal-close::after,
.modal-close::before{
  position: absolute;
  content: "";
  width: 19px;
  height: 3px;
  top: 10px;
  right: 1px;
  background-color: #cccccc;
}
.modal-close:hover::after,
.modal-close:hover::before,
.modal-close:focus::before,
.modal-close:focus::after{
  position: absolute;
  content: "";
  width: 19px;
  height: 3px;
  top: 10px;
  right: 1px;
  background-color: #fff;
}
.modal-close::after{
  transform: rotate(45deg);
}
.modal-close::before{
  transform: rotate(-45deg);
}



==================================JS
 var mapLink = document.querySelector(".contacts-button-map");
 var mapModal = document.querySelector(".modal-map");
 var mapClose = document.querySelector(".modal-close");

mapLink.addEventListener("click", function(evt){ 
evt.preventDefault();mapModal.classList.add("modal-show");
});

mapClose.addEventListener("click", function(evt){
evt.preventDefault();
mapModal.classList.remove("modal-show");
}); 

window.addEventListener("keyup", function(evt){
  if (evt.keyCode === 27) {
   evt.preventDefault();
  if (mapModal.classList.contains("modal-show")){
    mapModal.classList.remove("modal-show");
  };`введите сюда код`
  };
} );

Прошу помочь не могу найти ошибку Буду благодарен

Этот код работает он же точно такой же как первый почему 1 работает а другой нет

var modal = document.querySelector(".modal-login");
var close = document.querySelector(".modal-close");
var login = modal.querySelector("input[name=login]"); 
var form = modal.querySelector("form");
var password = modal.querySelector("[name=password]");
var isStorageSupport = true;
var storage = "";

try{
  storage = localStorage.getItem("login");
} catch(err){
  isStorageSupport = false;
}

link.addEventListener("click", function(evt){ 
evt.preventDefault();modal.classList.add("modal-show");


if (storage) {
  login.value = storage;
  password.focus(); 
} else{
  login.focus();
}  
});

close.addEventListener("click", function(evt){
evt.preventDefault(); modal.classList.remove("modal-show");
});

form.addEventListener("submit", function(evt){

if (!login.value || !password.value){ 
evt.preventDefault(); 
console.log("Нужно ввести Логин и Пароль");
} else{
  if (isStorageSupport) {
  localStorage.setItem("login", login.value);
  }

}
});

window.addEventListener("keyup", function(evt){
  if (evt.keyCode === 27) {
   evt.preventDefault();
  if (modal.classList.contains("modal-show")){
    modal.classList.remove("modal-show");
  };

  };
} );