Задать вопрос
@htmlcssnoob1
javascript

Не работает код Js что делать?

При нажатии на зарегистрироваться выходит форма в противоположную сторону и при нажатии войти тоже в противоположной стороне

<!DOCTYPE html>
<html lang="ru"

<head>
  <meta charset="utf-8">
  <title>Вход или регистрация</title>
<link rel="stylesheet" href="style.css"
<script src="script.js" defer></script>
</head>

<body>
<!--Контейнер -->
<article class="container">
<!-- Внутренний Блок -->
<div class="block">
  <section class="block_item block-item">
    <h2 class="block-item_title">У вас уже есть аккаунт?</h2>
    <button class="block-item_btn signin-btn">Войти</button>
  </section>
  <section class="block_item block-item">
    <h2 class="block-item_title">У вас нет аккаунта?</h2>
    <button class="block-item_btn signup-btn">Зарегистрироваться</button>
  </section>
</div>
<!-- Блок Формы-->
<div class="form-box">

</div>
</article>
</body>

</html>
*{
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;

  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(кб1.jpg);
  background-size: 205vh;
}
/*Контейнер*/

.container {
  width: 800px;
  height: 500px;
  padding: 40px 0;
  position: relative;


}
.block {
  height: 100%;
  background-color: #fff;
  opacity: 1;
  box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;

display: flex;
align-items: center;
}
.block_item{
  text-align: center;
  width: 50%
}
.block-item_title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 10px;
}
.block-item_btn {
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  background-color: #f2f3f4;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

}
/*Форма*/
.form-box {
  background-color: #fff;
  height: 100%;
  width: 50%;
  box-shadow: 0 5px 45px rgba(0 0 0 0.25);

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
.active {
  left: 50%
}

const signinbtn = document.queryselector('.signin-btn');
const signupbtn = document.queryselector('.signup-btn');
const formbox = document.queryselector('.formbox');

signup.addeventlistener('click', function() {
  formbox.classlist.add('active');
});

signin.addeventlistener('click', function() {
  formbox.classlist.remove('active');
});
  • Вопрос задан
  • 156 просмотров
6 комментариев
Подписаться 1 Простой 6 комментариев
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Заглядывайте в консоль браузера — сообщения об ошибках бывают весьма полезны.
- const signinbtn = document.queryselector('.signn-btn');
- const signupbtn = document.queryselector('.signup-btn');
- const formbox = document.queryselector('.formbox');
+ const signinbtn = document.querySelector('.signin-btn'); // имя класса
+ const signupbtn = document.querySelector('.signup-btn');
+ const formbox = document.querySelector('.formbox');

Та же проблема потери заглавных букв в addEventListener и classList.
Косяки с именами классов кнопок — проверяйте. В разметке одно имя класса, в querySelector() – чуть другое.

На будущее, пожалуйста, такие простыни кода не пихайте в текст вопроса, а создавайте песочницу с работающим кодом, например, на Codepen.io:
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Вы в js form-box ищете как formbox, линию забыли)( и еще const signinbtn = document.queryselector('.signn-btn')
записано неверно, перепроверьте все. Короче, кучу ошибок в коде, проверьте все названия классов, которые вы в js ищите
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка алгоритма на python (Data engineering)
21 нояб. 2024, в 23:30
300000 руб./за проект
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Разработать Custom Speech-to-text Operator на Apache Flink
21 нояб. 2024, в 21:42
100000 руб./за проект
Ещё заказы