Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2020, 06:37
Новичок на форуме
Отправить личное сообщение для Garrus Посмотреть профиль Найти все сообщения от Garrus
 
Регистрация: 02.12.2020
Сообщений: 2

Код полностью работает в консоли браузера,без нее только часть скрипта срабатывает
Скрипт должен открывать и закрывать модальное окно. Если загружать страницу в браузере, то работает только кнопка открытия, но через консоль все работает нормально.

var open = document.querySelector('.write-us');
var modal = document.querySelector('.modal');
var close = modal.querySelector('.modal_close');

open.addEventListener("click", function (evt) {
evt.preventDefault();
modal.classList.remove("visually-hidden");
});

close.addEventListener("click", function (evt) {
evt.preventDefault();
modal.classList.add("visually-hidden");
});

//html//

<article class="modal visually-hidden">
<form action="..." method="...">
...
</form>
<button type="button" class="modal_close"></button>
</article>

.....
<script src="js/modal.js"></script>
</body>

Подскажите пожалуйста почему кнопка закрытия работает только когда ввожу весь скрипт в консоль.
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2020, 07:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<style>
.visually-hidden {
    display: none;
}
</style>

<article class="modal visually-hidden">
<form>
<input value="test" />
</form>
<button type="button" class="modal_close">Close</button>
</article>
<button type="button" class="write-us">Open</button>

<script>
var open = document.querySelector('.write-us'),
    modal = document.querySelector('.modal'),
    close = modal.querySelector('.modal_close');

open.addEventListener("click", function () {
    modal.classList.remove("visually-hidden");
});

close.addEventListener("click", function () {
    modal.classList.add("visually-hidden");
});
</script>


Что-то не все сказано/показано. Работает ведь без проблем? Единственно, что убраны никчемные evt.preventDefault();, для кнопки закрытия этого гарантированно не требуется, а если и кнопка открытия тоже button или иное не имеющее действия по умолчанию, то и для нее тоже не требуется.
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2020, 07:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Garrus,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Собственно код работает только при window.onload() sl1m Events/DOM/Window 9 26.03.2014 17:54
Код работает только на опере и ie ml227 Общие вопросы Javascript 2 07.07.2013 12:08
Код в консоли хрома работает, а если вписать в сайт - то нет across Javascript под браузер 4 15.08.2012 20:38
есть код, но работает только в одном браузере. Александр х@к Элементы интерфейса 9 31.08.2011 01:52
есть код, но работает только в одном браузере 2 Александр х@к Элементы интерфейса 29 30.08.2011 20:25