我目前正在学习 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;}
4 回答
至尊宝的传说
TA贡献1789条经验 获得超10个赞
您必须将按钮类型更改为“按钮”并将事件 onclick="osszead()"。默认情况下，html 按钮类型是“提交”，并且作为默认行为，单击提交按钮会将其数据提交到其操作 url。
<button type="button" onclick="osszead()">go</button>
qq_遁去的一_1
TA贡献1725条经验 获得超7个赞
发生这种情况是因为该按钮具有默认值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);
肥皂起泡泡
TA贡献1829条经验 获得超6个赞
默认情况下，按钮充当“提交”类型，提交类型倾向于重新加载页面。您可以使用 function passed(e){e.preventDefault();...}. <button type="button" onclick="osszead">go</button>也可能工作。
料青山看我应如是
TA贡献1772条经验 获得超8个赞
您需要为您的按钮添加一个 onclick 事件和一个类型。
<button type="button" onclick="osszead()">go</button>
添加回答
举报
0/150
提交
取消