HTML表单点击按钮后JS执行结果一闪即逝如何解决？

数据老陈

2026-9-26

问题原因

你遇到的闪屏问题核心是form表单的默认提交行为被触发了：

<button> 标签如果放在 <form> 内部，没有指定type属性的话，浏览器默认会把它识别为 submit 类型的按钮
点击后会自动提交表单到你写的action地址，你这里action是空值，就会刷新当前页面，所以JS修改的提示文本、背景色都会随着页面刷新消失，表单也会重置成初始状态

修复方案

任选一种即可：

方案1：给button指定type为button，阻止默认提交

把HTML里的按钮代码改成：

<button type="button" onclick="withdraw()">click me</button>

明确指定按钮是普通交互按钮，不是提交按钮，就不会触发表单提交逻辑。

方案2：在JS函数里阻止默认事件

先修改HTML的按钮调用，把事件对象传进去：

<button onclick="withdraw(event)">click me</button>

再修改JS的withdraw函数，首行加阻止默认行为的代码：

function withdraw(e){
    // 新增这行阻止表单默认提交
    e.preventDefault();
    // 原有逻辑保持不变
    var namevar= document.getElementById("name").value;
    var passwordvar=document.getElementById("password").value;
    var amountvar=document.getElementById("amount").value;
    var Amount=3000;
    var name="Benjamin Anoruo";
    var pass="testing123";
    var n=Amount-amountvar;
    if(namevar==name && passwordvar==pass ){
        if(amountvar<=Amount){
            document.getElementById("para").innerHTML="your withdrawal was successful. your new balance is:"+n;
            document.body.style.backgroundColor='green';
        }
    }
}