@iamjmitch
Posted
Hi there,
Ill do my best to try and explain some stuff
To answer your reset question, try form.reset(). this worked for me.
the other issue you are having is that the JS is not actually capturing the value of the input. const email = document.getElementById('email').value.trim() is running at page load, not when you hit the notify button so the inputted email address is never actually being captured and passed to the checkInputs() function for validation. Try declaring email on load const email = document.getElementById('email') and then inside your eventListener have something that looks like
form.addEventListener('submit', (e) => {
e.preventDefault();
var inputtedValue = email.value.trim();
checkInputs(inputtedValue);
})
this will make sure that the most up to date value is always passed to your check function when the user hits the notify button
Then with your actual check function, if(!email) is checking to see if the variable doesn't exist which, as you are declaring it on page load, email will never not exist and the first block of code will never run. What you want to do is check whether that value is an empty string or ""
function checkInputs(inputtedValue) {
if (inputtedValue === "") {
message.classList.remove('valid')
message.classList.add('invalid')
message.innerText = 'You forgot to enter your address'
message.style.display = 'inline-block'
} else if (inputtedValue.match(emailPattern)) {
message.classList.add('valid')
message.classList.remove('invalid')
message.innerText = 'Your email address is valid'
message.style.display = 'inline-block'
} else {
message.classList.remove('valid')
message.classList.add('invalid')
message.innerText = 'Oops, something went wrong'
message.style.display = 'inline-block'
}
}
Have a look at the above modified function and see if you can work out whats going on. All the above put together should result in the functionality that your after. Hopefully this somewhat explains some stuff. Please let me know if you still dont understand and I can see how I can help
@iamjmitch It works! Thank you. Your explanation made me understand what I was doing wrong. It really helped me. :)
Would you help me still though with where do I need to put the form.reset()and do I also need to reset the message, or does this automatically work when I reset the form?
@iamjmitch
Posted
@graficdoctor
I'm not sure where the reset is meant to be, does the readme tell you when they want the form to clear? Is it after everytime you hit notify or only when the email successfully passed validation?
As for the message, you will need to tell it to reset seperately as reset() only effect form elements (input , textarea etc)
My suggestion would be to create a clear function that does both form.reset() and message.innerText="" and then run that function when needed
@iamjmitch It doesn't say in the readme about clearing the form. It was a remark I got on a previous challenge and I've been looking into it since. I'm going to try adjust it, with your feedback. Thanks for helping me š.
@iamjmitch
Posted
@graficdoctor ah gotcha. Hopefully you can work it out on your own. If not, comment back here and I'm happy to point you in the right direction
