嘿，我来帮你捋捋这个问题！你碰到的页面自动刷新和提示文本不显示其实是关联在一起的——页面刷新直接打断了后续的文本替换逻辑，所以先解决刷新问题，文本显示的事儿自然就搞定了。

问题根源分析 #

你的代码逻辑本身没问题，但在WordPress+DIVI的环境下，有两个关键点容易出状况：

• 表单里的按钮默认是type="submit"，哪怕你加了e.preventDefault()，DIVI主题的内置脚本可能会干扰事件执行顺序，导致默认提交行为没被阻止，页面就刷新了。
• 脚本可能在DOM完全加载前就运行了，导致getElementById('buttonsms')找不到元素，事件绑定根本没生效。

核心代码回顾 #

先把你提供的核心代码贴出来方便对照：

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（完整动画逻辑） #

.formnumber {
  position: relative;
  display: inline-block;
}
.inputsms {
  padding: 10px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.buttonsms {
  padding: 10px 20px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttonsms.is-done {
  background: #27ae60;
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

分步解决方案 #

1. 彻底阻止表单默认提交行为 #

直接给按钮加上type="button"，从根源上避免它触发表单提交：

<button class="buttonsms" id="buttonsms" type="button">ENVOYER ></button>

2. 确保脚本在DOM加载完成后执行 #

WordPress里脚本加载顺序很重要，把你的JS代码包裹在DOM加载完成的事件里，保证元素已经渲染后再绑定事件：

原生JS版本

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('buttonsms');
  if(button){
    button.addEventListener('click', function(e) {
      // 双重保险阻止默认行为
      e.preventDefault();
      this.classList.add('is-done');
      // 用箭头函数保存this指向，避免setTimeout里的this丢失
      setTimeout(() => {
        this.innerHTML = "MERCI, VEUILLEZ VÉRIFIER VOS MESSAGES 😍";
      }, 500);
    });
  }
});

DIVI兼容的jQuery版本（更稳妥）

因为DIVI主题基于jQuery开发，用jQuery绑定事件能避免很多兼容性问题：

jQuery(document).ready(function($) {
  $('#buttonsms').on('click', function(e) {
    e.preventDefault();
    $(this).addClass('is-done');
    var $btn = $(this);
    setTimeout(function() {
      $btn.html("MERCI, VEUILLEZ VÉRIFIER VOS MESSAGES 😍");
    }, 500);
  });
});

3. 额外排查点 #

如果还是有问题，去DIVI的主题设置里看看有没有开启表单自动提交的相关选项，或者检查有没有其他插件（比如表单插件）和你的自定义脚本冲突。

按照这个步骤改完，页面就不会刷新了，提示文本也能正常显示啦！

内容的提问来源于stack exchange，提问作者Joris