点击Submit按钮页面自动刷新，求阻止方法及刷新原因（已试event.preventDefault()）

点击Submit按钮后输入框的值仅短暂显示就消失，页面自动刷新，希望页面不刷新且稳定显示值。已知用event.preventDefault()有效，想知道其他解决方法，以及代码是否存在错误。

页面刷新的原因 #

这是浏览器的默认行为：<form>标签内的<input type="submit">按钮被点击时，会触发表单的提交操作。哪怕你的<form>没有指定action属性，浏览器也会默认向当前页面URL提交表单，导致页面刷新，之前通过JS插入的内容会随着页面刷新被重置。

代码本身的问题 #

你的代码逻辑没有错误，核心问题就是没有阻止表单提交的默认行为，所以才会出现内容刚显示就刷新消失的情况。

除了event.preventDefault()的其他解决方法 #

方法1：把submit按钮改成普通按钮 #

将<input type="submit">改为<input type="button">，这样按钮就不会触发表单提交的默认行为，点击后只会执行myFunc()：

<form>
    <label for="name">Name:</label>
    <input id="name" type="text">
    <input type="button" value="Send" onclick="myFunc()">
</form>

方法2：监听form的submit事件并阻止默认行为 #

把事件绑定在<form>标签的onsubmit上，而不是按钮的onclick，这样更符合表单的逻辑：

<form onsubmit="myFunc(event)">
    <label for="name">Name:</label>
    <input id="name" type="text">
    <input type="submit" value="Send">
</form>

对应的JS修改为：

function myFunc(event){
    event.preventDefault(); // 阻止表单提交默认行为
    const name = document.getElementById("name").value;
    document.getElementById("show_name").innerHTML = name;
}

方法3：移除form标签 #

如果你的页面不需要表单提交的功能（比如只是前端交互），可以直接去掉<form>标签，这样submit按钮就失去了默认的提交触发条件：

<label for="name">Name:</label>
<input id="name" type="text">
<input type="submit" value="Send" onclick="myFunc()">
<p id="show_name"></p>

原代码展示 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page 1</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input id="name" type="text">
        <input type="submit" value="Send" onclick="myFunc()">
    </form>
    <p id="show_name"></p>
</body>
</html>

JavaScript代码 #

function myFunc(){
    const obj = {
        name : document.getElementById("name").value
    }
    document.getElementById("show_name").innerHTML = obj.name;
}

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