当我在表单上单击submit时，应该会弹出其他内容。但是当我点击submit时，它会重新加载页面，这样东西就不会弹出。
我还没有找到我正在寻找的答案。我还没有完成这个项目，所以如果它看起来不完整，那就是原因。
这是代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="header">
<span class="siteheader">ChubbyMan'sMath.com</span>
<div class="title">Area Calculator</div>
</div>
<p class="question">What shape do you want to find the area of?</p>
<p id="n1" onclick="showForm();">1. Square</p> <!-- answer --> <p id="squareanswer">The area is 100.</p>
<p id="n2">2. Rectangle</p>
<p id="n3">3. parallelogram</p>
<p id="n4">4. Circle</p>
<p id="n5">5. Triangle</p>
<p id="n6">6. Rhombus</p>
<p id="n7">7. Trapezoid</p>
<form name="squareform" id="squareform">
<input id="squareinput" type="text" placeholder="x">
<input type="submit" value="Submit" id="squarebutton" onclick="square()">
</form>
</body>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:900&display=swap" rel="stylesheet">
</html>
（CSS）
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
.header {
width: 100%;
height: 200px;
background-color: rgb(62, 110, 243);
}
body {
background-color: lightblue;
}
.siteheader {
background-color: darkblue;
font-size: 150%;
color: white;
position: absolute;
left: 40px;
top: 30px;
padding: 10px;
}
.title {
position: absolute;
font-size: 300%;
color: lightgray;
left: 35%;
top: 80px;
}
.question {
position: absolute;
font-size: 125%;
left: 90px;
top: 250px;
}
#n1 {
position: absolute;
left: 90px;
top: 300px;
}
#n2 {
position: absolute;
left: 90px;
top: 350px;
}
#n3 {
position: absolute;
left: 90px;
top: 400px;
}
#n4 {
position: absolute;
left: 90px;
top: 450px;
}
#n5 {
position: absolute;
left: 90px;
top: 500px;
}
#n6 {
position: absolute;
left: 90px;
top: 550px;
}
#n7 {
position: absolute;
left: 90px;
top: 600px;
}
#squareform {
position: absolute;
left: 200px;
top: 295px;
display: none;
}
#squareanswer {
position: absolute;
left: 400px;
top: 295px;
display: none;
}
（JAVASCRIPT）
var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
var squareInput = document.getElementById('squareinput').value;
function showForm () {
document.getElementById('squareform').style.display = "block";
};
function square() {
document.getElementById('squareanswer').style.display = "block";
};
n2.onclick = function rectangle() {
};
只需将return false添加到onclick事件：
<input type="submit" value="Submit" id="squarebutton" onclick="square(); return false;">
由于没有使用任何表单处理程序，因此不需要提交按钮类型。您只需使用一个带有类型按钮的输入，它就可以正常工作。只需将提交按钮代码更改为以下代码-
<input type="button" value="Submit" id="squarebutton" onclick="square()">
这是故意的；这就是HTML表单的工作方式。当用户单击带有type=“submit”的表单中的按钮时，表单将提交到表单标签的action=“属性中指定的页面。如果未指定其他页面（或省略属性），则表单数据将发送到同一页面（即原始页面；即表单所在的页面），这被视为页面刷新。
为了避免这种（默认）行为，您可以中断提交过程并返回false——或者，您可以从使用表单切换到使用AJAX。
如何中断表单提交过程
什么是AJAX以及如何使用它
单击时提交表单
我应该要一张表格还是两张分开的表格
