по задумке при нажатии на кнопку логин, 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>
Уберите строку 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);
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Напишите функцию, которая создаёт вложенный список UL/LI (дерево) из объектаКак я понимаю функция createTreeText(obj) обрабатывает вложенные друг в друга...
Не могу понять почему не работает роутинг на деплое
Пытаюсь реализовать приложение на ReactJS с использованием json-сервераЗахожу на localhost:3001 и localhost:3000 - пустота