Не срабатывает событие при нажатии на button

149
27 января 2020, 10:50

по задумке при нажатии на кнопку логин, div call_container должен менять свой display на block вместо none. но js не срабатывает, только начал изучать js, не понимаю, в чём проблема.

document.addEventListener("DOMContentLoaded", ready); 
 
const callForm = document.querySelector('.call_container'); 
const open = document.getElementById('button_login'); 
 
function openForm () { 
  callForm.style.display = 'block'; 
  alert('hey'); 
} 
 
open.addEventListener('click', openForm);
body { 
  color: white; 
} 
.call_container { 
  display: none; 
  position: absolute; 
  width: 200px; 
  height: 200px; 
  background: #7586c4; 
  border-radius: 5px; 
  margin-top: -260px; 
  margin-left: 115px; 
} 
.call_container .call_form { 
  position: relative; 
  margin-top: 35%; 
  color: white; 
  font-size: 16px; 
  display: flex; 
  flex-wrap: wrap; 
} 
.call_container .call_form input { 
  width: 100px; 
  border: 0; 
  background: white; 
} 
.call_container .call_form label { 
  padding: 5px; 
} 
.call_container .call_form input[name="adress"] { 
  margin-top: 10px; 
} 
.call_container .call_form label[for="adress"] { 
  margin-left: 3px; 
  margin-top: 10px; 
} 
.container { 
  margin: 15% auto; 
  height: 348px; 
  width: 422px; 
  border-radius: 5px; 
  box-shadow: 0 0 25px black; 
  background-image: radial-gradient(circle, rgba(103, 145, 203, 0.75), rgba(0, 0, 0, 0.35)), radial-gradient(circle at -115px 2750px, #3f71b5 87%, transparent 87.1%), radial-gradient(circle at -292px 2000px, #305ea3 87%, transparent 87.1%), linear-gradient(4deg, #3f71b5 73%, #305ea3 74%); 
} 
.container .wrapper { 
  padding: 46px 28px 29px 45px; 
} 
.container .wrapper .login { 
  font-family: "TimesNewRoman", sans-serif; 
  font-weight: 900; 
  font-size: 2.3em; 
} 
.container .wrapper .lorem { 
  font-family: "Arial", sans-serif; 
  font-size: 0.8em; 
  font-weight: 100; 
} 
.container .wrapper form { 
  margin-top: 40px; 
  margin-left: 20px; 
} 
.container .wrapper form input { 
  font-family: "Arial", sans-serif; 
  font-size: 0.9em; 
  font-weight: 100; 
  padding: 5px; 
  width: 204px; 
  margin-left: 5px; 
  background: #1e4f8a; 
  border: 1px solid #002043; 
  color: white; 
} 
.container .wrapper form label { 
  font-size: 0.8em; 
  font-weight: 100; 
  font-family: "Arial", sans-serif; 
} 
.container .wrapper form label[for="email"] { 
  margin-left: 23px; 
} 
.container .wrapper form label[for="check_box"] { 
  display: inline-block; 
  margin-left: -97px; 
  margin-top: 2px; 
  vertical-align: text-top; 
  font-size: 0.7em; 
} 
.container .wrapper form input[type="password"] { 
  margin-top: 10px; 
} 
.container .wrapper form input[type="checkbox"] { 
  margin-left: -27px; 
  margin-top: 10px; 
} 
.container .wrapper form ::placeholder { 
  color: white; 
} 
.container .wrapper form a { 
  display: inline-block; 
  font-family: "Arial", sans-serif; 
  color: white; 
  font-size: 0.7em; 
  margin-left: 30px; 
  vertical-align: text-top; 
  margin-top: 2px; 
} 
.container .wrapper form button { 
  width: 100px; 
  margin-left: 69px; 
  margin-top: 10px; 
  padding: 10px 15px; 
  background: #4684d1; 
  border-radius: 5px; 
  border: 0; 
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); 
  font-family: "TimesNewRoman", sans-serif; 
  color: white; 
  font-weight: bold; 
}
<!doctype html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Login</title> 
  <link rel="stylesheet" href="/css/styles.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="description" content=""> 
  <meta name="keywords" content=""> 
  <meta name="author" content=""> 
  <link rel="stylesheet" href="css/styles.css?v=1.0"> 
  <!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]--> 
</head> 
 
<body> 
 
  <div class="container"> 
    <div class="wrapper"> 
      <span class="login">Login</span> 
      <br> 
      <span class="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry</span> 
      <form class="" action="index.html" method="post"> 
        <label for="email">Email:</label> 
        <input type="email" name="email" placeholder="Enter your email..." value=""> 
        <br> 
        <label for="pass">Password:</label> 
        <input type="password" name="pass" placeholder="••••••••" value=""> 
        <br> 
        <input type="checkbox" name="check_box" value=""> 
        <label for="check_box">Remember Me</label> 
        <a href="#">Forgot password?</a> 
        <button type="button" id="button_login" name="button">LOGIN</button> 
      </form> 
    </div> 
    <div class="call_container"> 
      <div class="call_form"> 
        <label for="phone">Ваш номер</label> 
        <input type="number" name="phone" value=""> 
        <label for="adress">Ваш адрес</label> 
        <input type="text" name="adress" value=""> 
      </div> 
    </div> 
  </div> 
  <script src="script.js"></script> 
</body> 
</html>

Answer 1

Уберите строку document.addEventListener('DOMContentLoaded', ready); и ваш код заработает (если скрипт находится в конце страницы). Сейчас он падает с ошибкой, т.к. обработчик ready не определён.

Либо можно определить ready:

document.addEventListener('DOMContentLoaded', ready);
function ready() {
  const callForm = document.querySelector('.call_container');
  const open = document.getElementById('button_login');
  function openForm() {
    console.log('111');
    callForm.style.display = 'block';
    alert('hey');
  }
  open.addEventListener('click', openForm);
}
READ ALSO
Вопрос по работе рекурсивной функции

Вопрос по работе рекурсивной функции

Напишите функцию, которая создаёт вложенный список UL/LI (дерево) из объектаКак я понимаю функция createTreeText(obj) обрабатывает вложенные друг в друга...

152
не работает роутинг после деплоя на gh pages react app

не работает роутинг после деплоя на gh pages react app

Не могу понять почему не работает роутинг на деплое

161
Пустой экран json-сервер с ReactJS?

Пустой экран json-сервер с ReactJS?

Пытаюсь реализовать приложение на ReactJS с использованием json-сервераЗахожу на localhost:3001 и localhost:3000 - пустота

145