newsletter sign up using vanilla HTML CSS and javascript

Community feedback

• 

  Mynor Zuñiga•210

  @mynorzsPosted over 1 year ago

  Hello!

  I see that you are having the problem I had hiding the maing content. I beleive there are different ways to go over this, but I will share how I found out and how I implemented it in my solution.

  The main content is not hiding because your subscribe button is submitting the form, and submitting the form reloads the whole thing, so that default action needs to be prevented. In the click event listener, in the function you can pass a parameter, let's say "e" or "event", and inside the function you can take that parameter and apply .preventDefault(), so it would be something like this:

  yourbutton.addEventListener('click', (event) => { even.preventDefault(); })

  In your case, try: function handleModal(event) { event.preventDefault(); modal.classList.add("visible"); main_content.classList.add("hidden"); }

  I hope that works for you. I'm fairly new myselft, so I'm sorry if I cannot explain myself very well here.

  1
• 

  Carl•855

  @CarlHummPosted over 1 year ago

  Your form is following default behavior and refreshing on form submission, so you only see your show/hide functionality for around a milisecond.

  Add e.preventDefault() to the handleModal function and pass event object as e to prevent this behavior and allow JavaScript to handle post form submission.

  0