单击按钮后，网页会自行刷新。我怎么能避免呢？
我目前正在学习 JS 基础知识，示例代码的行为很奇怪。当我按下按钮时，输入“ar1”和“ar2”中的两个数字应该相加，并显示在段落中。一会儿我看到了答案，但网页立即刷新。什么可能导致它？感谢您的回答！
...
<body>
<form>
<input type="number" name="ar1"></br>
<input type="number" name="ar2"></br>
<button>go</button>
</form>
<p id="osszeg">Here is the answer</p>
<script src="script.js"></script>
</body>
</html>
脚本.js：
function osszead()
{
let ar1 = parseInt(document.querySelector("input[name=ar1]").value);
let ar2 = parseInt(document.querySelector("input[name=ar2]").value);
let ossz = ar1 + ar2;
document.querySelector("#osszeg").innerHTML = ossz;
}
猛跑小猪浏览 131回答 4
4回答
-
至尊宝的传说
您必须将按钮类型更改为“按钮”并将事件 onclick="osszead()"。默认情况下，html 按钮类型是“提交”，并且作为默认行为，单击提交按钮会将其数据提交到其操作 url。<button type="button" onclick="osszead()">go</button> -
qq_遁去的一_1
发生这种情况是因为该按钮具有默认值type，submit因为它位于 a 内<form>，这会导致它提交表单，从而有效地重新加载页面。您可以：根本不使用任何<form>：<body> <input type="number" name="ar1"></br> <input type="number" name="ar2"></br> <button id="go-button">go</button> <p id="osszeg">Here is the answer</p> [...]显式设置button类型：<body> <form> <input type="number" name="ar1"></br> <input type="number" name="ar2"></br> <button id="go-button" type="button">go</button> </form> <p id="osszeg">Here is the answer</p>请注意，我id在按钮上添加了一个，因为您还需要添加一个click事件侦听器。将此添加到 JavaScript 代码的末尾：const btn = document.getElementById("go-button");btn.addEventListener("click", osszead); -
肥皂起泡泡
默认情况下，按钮充当“提交”类型，提交类型倾向于重新加载页面。您可以使用 function passed(e){e.preventDefault();...}. <button type="button" onclick="osszead">go</button>也可能工作。 -
料青山看我应如是
您需要为您的按钮添加一个 onclick 事件和一个类型。<button type="button" onclick="osszead()">go</button>
随时随地看视频慕课网APP
相关分类
JavaScript