单击按钮Javascript，HTML时页面重新加载

Question

单击按钮时出现问题。我的页面重新加载，并且不显示消息“MERCI，VEUILLEZVÉRIFIERVOSMESSAGES”。我不知道这两个问题是否有关联。我在使用DIVI主题的Wordpress，Chrome上。我在控制台中没有错误。

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);
});
}

您可以使用CSS和动画here查看所有代码

Answer 1

容易，将按钮属性设置为onmousedown =“location.reload（）;”

Answer 2

当我替换HTML时

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

更换前的动画和样式：

image 1 image 2

更换后的动画和样式：

image 1 image 2