事件监听器内按钮文本无法更新问题咨询

触发表单submit事件时，按钮文本没法更新，但在事件监听器外面测试修改文本的代码完全正常，问题出在监听器内部。

用户提供的代码如下：

let addToCartForms = document.querySelectorAll(".bundle-builder--add-to-bundle-form");
addToCartForms.forEach((el)=>{
    let btn = el.querySelector('.add-to-cart');
    let btnText = btn.innerText;
    
    el.addEventListener("submit",(e)=>{
        btn.innerText = "added"
    });
})

问题原因 #

表单提交的默认行为会刷新页面，你刚把按钮文本改成"added"，页面就立刻刷新重置了所有元素状态，所以看不到文本变化。

解决方案 #

在事件回调里先阻止表单的默认提交行为，再修改按钮文本：

let addToCartForms = document.querySelectorAll(".bundle-builder--add-to-bundle-form");
addToCartForms.forEach((el)=>{
    let btn = el.querySelector('.add-to-cart');
    
    el.addEventListener("submit",(e)=>{
        // 阻止表单默认提交刷新页面
        e.preventDefault();
        btn.innerText = "added";
        // 如果需要提交表单数据，在这里写AJAX/fetch异步提交逻辑即可
    });
})

如果你的业务需要实际提交表单数据，别忘记在修改文本后，通过AJAX或Fetch API来异步提交表单内容，避免页面刷新。

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