skip to Main Content

I have an issue when clicking a button. My page reload and the message “MERCI, VEUILLEZ VÉRIFIER VOS MESSAGES” doesn’t display. I don’t know if these two issues are linked. I’m on WordPress, Chrome, with DIVI themes. and I don’t have error in console.

HTML:

<form class="formnumber">
  <input class="inputsms" id="number" placeholder="ENTREZ VOTRE NUMÉRO" />
  <button class="buttonsms" id="buttonsms">ENVOYER ></button>
</form>

JavaScript:

var button = document.getElementById('buttonsms');


if(button){
button.addEventListener('click', function(e) {
  e.preventDefault();
  this.classList.add('is-done');

  setTimeout(function() {
    button.innerHTML = "MERCI, VEUILLEZ VÉRIFIER VOS MESSAGES 😍"
  }, 500);
});
}

You can see all the code with CSS and animation here

2

Answers


  1. Chosen as BEST ANSWER

    When I replace the HTML by

        <form class="formnumber"> 
    <input class="inputsms" id="number" placeholder="ENTREZ VOTRE NUMÉRO" /> </form> 
    <button class="buttonsms" id="buttonsms">ENVOYER ></button>
    

    Animation and style before replacing:

    image 1 image 2

    Animation and style after replacing:

    image 1 image 2


  2. easy, set the button attribute to be onmousedown=”location.reload();”

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search