Собственно форма входа на сайт Вылезает ошибка которая не позволяет выполнить скрипт,не понятно как у меня может быть тип null. Как исправить чтобы все работало?
var link = document.querySelector(".login");
var popup = document.querySelector(".modal-content");
var close = document.querySelector(".modal-content-close");
link.addEventListener("click", function(event) {
event.preventDefault();
popup.classList.add("modal-content-show");
});
close.addEventListener("click", function(event) {
event.preventDefault();
popup.classList.remove("modal-content-show");
});
.modal-content {
position: absolute;
top: 120px;
left: 50%;
margin-left: -230px;
width: 300px;
padding: 50px 80px;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
color: #000;
background: #f8f3f0 url("../img/bg2.jpg") repeat;
display: none;
}
.modal-content-close {
position: absolute;
top: 0;
right: -34px;
width: 22px;
height: 22px;
font-size: 0;
border: 0;
outline: 0;
background-color: transparent;
cursor: pointer;
}
.modal-content-show {
display: block;
}
.modal-content-close::before,
.modal-content-close::after {
content: "";
position: absolute;
top: 10px;
left: 2px;
width: 19px;
height: 3px;
background-color: #d0d0d0;
border-radius: 1px;
}
.modal-content-close::before {
transform: rotate(45deg);
}
.modal-content-close::after {
transform: rotate(-45deg);
}
.modal-content h2 {
margin: 0;
margin-bottom: 20px;
font-size: 30px;
line-height: 42px;
}
.modal-content p {
margin: 0;
margin-bottom: 14px;
}
.modal-content .login-form {
margin-top: 30px;
margin-bottom: 10px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 236px;
margin: 0;
margin-bottom: 10px;
padding: 10px 20px;
padding-right: 40px;
font-size: 14px;
line-height: 24px;
font-family: "PT Sans Narrow", "Arial", sans-serif;
color: #000;
text-transform: uppercase;
background-color: #f9f6f3;
border: 2px solid #000;
outline: none;
}
.login-form input:focus {
border-color: #663d15;
}
.login-form input.icon-user {
background-image: url("../img/man.png");
background-repeat: no-repeat;
background-position: 100% -504px;
}
.login-form input.icon-password {
background-image: url("./img/lock.png");
background-repeat: no-repeat;
background-position: 100% -45px;
}
.login-form .restore {
float: right;
color: #000;
}
.login-form .btn {
width: 100%;
margin-top: 15px;
}
.login-checkbox input[type="checkbox"] {
display: none;
}
.login-checkbox input[type="checkbox"]+.checkbox-indicator {
position: absolute;
top: -3px;
left: 0;
width: 17px;
height: 17px;
border: 2px solid #000;
}
.login-checkbox input[type="checkbox"]:checked+.checkbox-indicator::before,
.login-checkbox input[tupe="checkbox"]:checked+.checkbox-indicator::after {
content: "";
position: absolute;
top: 8px;
left: 1px;
width: 15px;
height: 2px;
background-color: #000;
}
.login-checkbox input[type="checkbox"]:checked+.checkbox-indicator::before {
transform: rotate(45deg);
}
.login-checkbox input[type="checkbox"]:checked+.checkbox-indicator::after {
transform: rotate(-45deg);
}
<div class="user-block">
<a href="#" class="login">Вход</a>
</div>
<div class="modal-content">
<button class="modal-content-close" type="button" title="закрыть">Закрыть</button>
<h2 class="modal-content-title">Личный кабинет</h2>
<p>Введите свой логин и пароль</p>
<form class="login-form" action="" method="post">
<input class="icon-user" type="text" name="login" placeholder="Логин">
<input class="icon-password" type="text" name="password" placeholder="Пароль">
<label class="login-checkbox">
<input type="checkbox" name="remember">
<span class="checkbox-indicator"></span>
Запомните меня
</label>
<a href="#" class="restore">Я забыл пароль !</a>
<button class="btn" type="submit">Войти</button>
</form>
<div class="modal-content-map">
<button class="modal-content-close" type="button" title="закрыть">
Закрыть
</button>
</div>
.login