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

126

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);
}

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

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

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

128

javascript