Код полностью работает в консоли браузера,без нее только часть скрипта срабатывает
Скрипт должен открывать и закрывать модальное окно. Если загружать страницу в браузере, то работает только кнопка открытия, но через консоль все работает нормально.
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> Подскажите пожалуйста почему кнопка закрытия работает только когда ввожу весь скрипт в консоль. |
<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 или иное не имеющее действия по умолчанию, то и для нее тоже не требуется. |
Garrus,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 03:36. |