modalが表示されない

html、css、javascript でmodalを作っているのですが、表示されなくて困っています

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login-mordal</title> <link rel="stylesheet" href="main.css"> </head> <body> <main> <button id="login">ログイン</button> </main> <div class="mordal-wrapper" id="mordal"> <div class="mordal-menu"> <h1 class="title">ログイン</h1> <input type="text" placeholder="メールアドレス"> <input type="password" placeholder="パスワード"> <span class="css-cansel" id="cansel"></span> </div> </div> <script src="main.js"></script> </body> </html>

css

main {
text-align: center;
z-index: 1;
}

button {
position: relative;
top: 100px;
width: 200px;
height: 80px;
background-color: red;
cursor: pointer;
}

.mordal-wrapper {
z-index: 2;
text-align: center;
position: absolute;
top: 290px;
left: 500px;
background-color: gray;
height: 260px;
width: 440px;
border-radius: 10px;
line-height: 40px;
display: none;
}

input {
display: block;
height: 30px;
width: 330px;
position: relative;
left: 50px;
margin-bottom: 40px;
}

.css-cansel {
display: inline-block;
position: relative;
top: -220px;
left: 195px;
width: 4px;
height: 20px;
background-color: #000;
transform: rotate(45deg);

}

.css-cansel::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 20px;
height: 4px;
margin-top: -2px;
background-color: #000;
}

.mordal-menu {
z-index: 3;
}

.mordal-wrapper.open {
transition-delay: 0s;
opacity: 1;
visibility: visible;;
}

javascript

var login = document.getElementById('login')
var mordal = document.getElementById('mordal')

var closing = document.getElementById('cansel')

closing.addEventListener('click' function() {
mordal.classlist.remove('open')
})

行動規範の内容に同意します

回答2件

ベストアンサー

こまかいtypoが多いですね

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var login = document.getElementById('login');
4  var modal = document.getElementById('modal');
5  var closing = document.getElementById('cansel');
6  login.addEventListener('click',function() {
7    modal.classList.add('open');
8  });
9  closing.addEventListener('click',function() {
10    modal.classList.remove('open');
11  });
12});
13</script>
14<style>
15.modal-wrapper{display:none}
16.modal-wrapper.open{display:block}
17</style>
18<main>
19  <button id="login">ログイン</button>
20</main>
21<div class="modal-wrapper" id="modal">
22  <div class="modal-menu">
23    <h1 class="title">ログイン</h1>
24    <input type="text" placeholder="メールアドレス">
25    <input type="password" placeholder="パスワード">
26    <span  class="css-cansel" id="cansel">close</span>
27  </div>
28</div>
29