@JaneMoroz
Posted
Hello! Cool solution to the challenge 👍
I've noticed that the submit button works the first time but not the second. So it seems like the problem is that after we click 'Dismiss message' and go back to the initial form, event listeners are not attached. I think this is because the form we're going back to is not the initial one but just newly created (with function pageSwapPrevious()).
- So maybe one solution is to make sure that
newsletteris not removed whensuccessshows up. To do so you need to givesuccesselementposition: absoluteand switch betweendisplay:noneanddisplay: something elseinstead of changingdocument.body.innerHTML. - Another solution is to move
subscribeButton.addEventListenerlogic intoonSubmit()function for example, you will also need to addinputElementandinvalidMessage:
function onSubmit() {
const inputElement = document.querySelector('.js-input');
const invalidMessage = document.querySelector('.invalid-email');
const regx = /^([a-zA-Z0-9\._]+)@([a-zA-Z0-9])+.([a-z]+)(.[a-z]+)?$/
if (inputElement.value.match(regx)) {
pageSwapNext();
return;
} else {
invalidMessage.innerHTML = 'Valid email required'
}
}
And then just add it to the button's onclick: <button onclick="onSubmit()" class="subscribe js-subscribe-button">Subscribe to monthly newsletter</button>
Keep it up! And good luck 🍀
@BBualdo
Posted
@JaneMoroz I don't think that positioning absolute is correct way to code it :/
Moving logic into onSubmit() function didn't solve the problem. There must be a way to return page content back to initial. First I thought about doing something to reload the page when I click Dismiss button but that is not the way too. It's weird. Any other ideas?
@BBualdo
Posted
@JaneMoroz I added window.location.reload() as I thought on the beginning but feel free to teach me the better way :)
@JaneMoroz
Posted
@BBualdo
I have't seen that success uses inputElement.value. So you need inputElement.value to be global variable.
I think since you changing document.body.innerHTML, you can remove addEventListener step entirely and just go to index.html and add onclick="onSubmit()" to button there as well.
let inputElement = document.querySelector(".js-input");
let invalidMessage = document.querySelector(".invalid-email");
function onSubmit() {
inputElement = document.querySelector(".js-input");
invalidMessage = document.querySelector(".invalid-email");
const regx = /^([a-zA-Z0-9\._]+)@([a-zA-Z0-9])+.([a-z]+)(.[a-z]+)?$/;
if (inputElement.value.match(regx)) {
pageSwapNext();
return;
} else {
invalidMessage.innerHTML = "Valid email required";
}
}
.
.
.
function pageSwapPrevious() {
.
.
.
<button onclick="onSubmit()" class="subscribe js-subscribe-button">Subscribe to monthly newsletter</button>
.
.
.
}
Everything works now!
P.S. Making success element positioned absolute is a good solution too. You would have to add it to index.html but initially it should be hidden. You can create visible class and then just attach it to the element after you submit and remove it after dismiss.
Marked as helpful
@JaneMoroz
Posted
@BBualdo
There're lots of ways to do it. window.location.reload() is not a bad solution, but it refreshes the whole page. If in future you have some long page with lots of stuff, reloading it can simply take too much time so in general people try to avoid using it.
@BBualdo
Posted
@JaneMoroz Yeah, I also think it's temporary solution.
@BBualdo
Posted
@JaneMoroz OK, now I understand :D thanks for your help and time :D
