Почему не работает передача емейла из формы?
Почему не передаются данные из формы ?Нужно что бы при нажатии на кнопку save me в появляющемся окне (место для текста выделено красным ) появлялось следующее
message.textContent = 'Адрес ' + email.value + ' добавлен';
Не могу понять что не так сделал ? Все остальное работает
https://codepen.io/sergey112/pen/GRZmRYj
let email = document.querySelector('.newslatter__content-email-place');
let message = document.querySelector('.newslatter-form__content-text');
const newslatterForm = document.querySelector('.newslatter-form');
const sendForm = document.querySelector('.newslatter__content-email-button');
function togglenewslatterForm(newslatterForm) {
newslatterForm.classList.toggle('newslatter-form_active');
if (newslatterForm.classList.contains('newslatter-form_active')) {
document.addEventListener('keydown', closeNewsLatterFormEscape);
} else {
document.removeEventListener('keydown', closeNewsLatterFormEscape);
}
}
const closeNewsLatterFormEscape = (evt) => {
const activeNewsLatterForm = document.querySelector('.newslatter-form_active')
if (evt.key === "Escape") {
activeNewsLatterForm.classList.remove('newslatter-form_active');
document.removeEventListener('keydown', closeNewsLatterFormEscape);
}
}
sendForm.addEventListener('click', () => {
togglenewslatterForm(newslatterForm);
});
newslatterForm.onsubmit = function(evt) {
evt.preventDefault();
message.textContent = 'Адрес ' + email.value + ' добавлен';
};
.newslatter-form {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .05);
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
}
.newslatter-form_active {
visibility: visible;
opacity: 1;
}
.newslatter-form__content {
width: 600px;
height: 450px;
border: 1px red solid;
background-color: #FFFFFF;
color: black;
}
.newslatter-form__content-text{
border:1px red solid;
width:300px;
height:20px;
margin:200px auto;
}
<form action="#" class="newslatter__content-email">
<input type="email" name="place-link" id="linkinput" placeholder="Email address" class="newslatter__content-email-place" required>
<button type="submit" class="newslatter__content-email-button">Save me</button>
</form>
<div class="newslatter-form">
<div class="newslatter-form__content">
<h2 class="newslatter-form__content-text"></h2>
</div>
</div>
Ответы (1 шт):
Автор решения: Igor
→ Ссылка
Инпут находится в другом родителе.
document.querySelector(".newslatter__content-email").addEventListener("submit", function(e){
e.preventDefault();
message.textContent = 'Адрес ' + email.value + ' добавлен';
});