I don't understand JS behaviour, but FIXED

Community feedback

• 

  Eugenia•950

  @JaneMorozPosted over 1 year ago

  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 newsletter is not removed when success shows up. To do so you need to give success element position: absolute and switch between display:none and display: something else instead of changing document.body.innerHTML .
  • Another solution is to move subscribeButton.addEventListener logic into onSubmit() function for example, you will also need to add inputElement and invalidMessage:

  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 🍀

  1

  ---

  

  BBualdo•540

  @BBualdoPosted over 1 year ago

  @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?

  1

  

  BBualdo•540

  @BBualdoPosted over 1 year ago

  @JaneMoroz I added window.location.reload() as I thought on the beginning but feel free to teach me the better way :)

  0

  

  Eugenia•950

  @JaneMorozPosted over 1 year ago

  @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

  1

  

  Eugenia•950

  @JaneMorozPosted over 1 year ago

  @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.

  1

  

  BBualdo•540

  @BBualdoPosted over 1 year ago

  @JaneMoroz Yeah, I also think it's temporary solution.

  0

  

  BBualdo•540

  @BBualdoPosted over 1 year ago

  @JaneMoroz OK, now I understand :D thanks for your help and time :D

  0