当我在表单上单击提交时，应该会弹出其他内容。但是，当我点击提交时，它会重新加载页面，因此该内容不会弹出。
我一直无法找到我正在寻找的答案。我还没有完成这个项目，所以如果它看起来不完整，那就是原因。
这是代码。
<!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;">
关于javascript - 提交表单时如何轻松阻止页面重新加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56844474/