JavaScript如何实现登录按钮首次点击报错、二次点击跳转页面

你不需要使用循环逻辑，只需要新增一个计数变量记录提交次数，根据次数执行对应逻辑即可，修改代码如下：

修改后的JS代码 #

// 全局变量记录提交次数，初始为0
let submitCount = 0;
function toggleError() {
    submitCount++;
    const errorElement = document.querySelector('.message--error');
    // 第一次点击提交
    if (submitCount === 1) {
        errorElement.classList.add('error-toggled');
        // 阻止表单默认提交行为
        return false;
    }
    // 第二次点击提交，允许跳转
    // 如果你需要自定义跳转地址，可替换为 window.location.href = '你的目标页面路径';
    return true;
}

修改form标签的onsubmit属性 #

把原有的onsubmit逻辑调整为接收函数返回值，用来控制是否阻止提交：

<form onsubmit="return toggleError()" action="/" method="get" class="login__form" autocomplete="off">

逻辑说明 #

1. 用submitCount变量累计用户点击提交按钮的次数，每次触发提交事件计数+1
2. 第一次提交时显示错误提示，返回false阻止表单跳转
3. 第二次提交时返回true，表单会按照action属性配置的地址自动跳转，你也可以直接通过window.location.href手动指定跳转目标
4. 原有CSS代码无需任何调整

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