HTML计算器页面点击提交按钮后自动刷新的问题排查

页面刷新的核心原因是：点击<input type="submit">按钮会触发表单的默认提交行为，浏览器会自动刷新页面并尝试发送表单数据到服务器，这是HTML表单的默认机制。

修复方案一：阻止表单默认提交行为 #

首先修正代码里的事件绑定错误——submit事件属于<form>元素，而非提交按钮本身。给表单添加ID后绑定submit事件，并阻止默认行为：

1. 修改HTML中的表单标签，添加ID：

<form id="calcForm">

2. 调整JavaScript代码，绑定表单的submit事件并阻止默认行为：

$(function() {
    $('#calcForm').submit(function(event) {
        // 关键：阻止表单默认提交刷新页面
        event.preventDefault();

        var calc1 = document.getElementById("calculator").value;
        var calc2 = document.getElementById("calculator2").value;
        var select = document.getElementById("options");
        var option = select.options[select.selectedIndex].text;

        if (calc1 <= 0 || calc2 <= 0){
            if (calc2 == 0 && option == '%' || calc2 == 0 && option == '/') {
                alert("It's Over 9000")
                console.log("It's Over 9000")
            } else {
                alert("Error :(")
                console.log("Error :(")
            }
        } 
        else {
            var calculated = eval(calc1 + option + calc2);
            console.log("The answer is " + calculated);
            alert("The answer is " + calculated);
        }
    });

    const doom = setInterval(UseMe, 30000);
    function UseMe() {
        let text = "Please, use me...";
        alert(text);
    }
});

修复方案二：改用普通按钮替代提交按钮 #

把提交按钮改成普通按钮，避免触发表单默认提交行为，直接绑定点击事件：

1. 修改HTML中的按钮标签：

<input type="button" value="Try Me" id="Try">

2. 调整JavaScript代码，绑定按钮的click事件：

$(function() {
    $('#Try').click(function() {
        var calc1 = document.getElementById("calculator").value;
        var calc2 = document.getElementById("calculator2").value;
        var select = document.getElementById("options");
        var option = select.options[select.selectedIndex].text;

        if (calc1 <= 0 || calc2 <= 0){
            if (calc2 == 0 && option == '%' || calc2 == 0 && option == '/') {
                alert("It's Over 9000")
                console.log("It's Over 9000")
            } else {
                alert("Error :(")
                console.log("Error :(")
            }
        } 
        else {
            var calculated = eval(calc1 + option + calc2);
            console.log("The answer is " + calculated);
            alert("The answer is " + calculated);
        }
    });

    const doom = setInterval(UseMe, 30000);
    function UseMe() {
        let text = "Please, use me...";
        alert(text);
    }
});

额外优化建议 #

1. 避免使用eval()：eval()会执行任意字符串代码，存在安全风险（比如用户输入恶意代码）。建议通过条件判断处理不同运算：

// 示例：根据选择的运算符计算
let calculated;
switch(option) {
    case '+':
        calculated = Number(calc1) + Number(calc2);
        break;
    case '-':
        calculated = Number(calc1) - Number(calc2);
        break;
    case '*':
        calculated = Number(calc1) * Number(calc2);
        break;
    case '/':
        calculated = Number(calc1) / Number(calc2);
        break;
    case '%':
        calculated = Number(calc1) % Number(calc2);
        break;
}

2. 修正HTML结构问题：<header>标签不应放在<head>外部，资源引用（CSS、JS）应放在<head>内；表单中两个输入框的name属性重复，建议改为不同值（如calc1和calc2）。

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