【发布时间】：2021-07-20 14:20:17
【问题描述】：
这是一个相当短而直接的代码。它等待提交并在发生时提醒“成功”。但是什么都没有发生，也没有显示错误。我曾尝试做一些细微的变化并使用箭头功能，但似乎没有任何效果。我对 Java 还很陌生，我写的很多代码都有错误，但是这段代码似乎太简单了，不会有错误。
下面是 JavaScript：
const form = document.querySelector('.form');
function onSubmit(e){
e.preventDefualt();
alert('sucess');
}
form.addEventListener('submit', onSubmit) ;
html
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f52626a245.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>April 26</title>
</head>
<body>
<!--Main-Container-->
<div class="container">
<!--arrow buttons left-->
<div class="buTTon">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
</div>
<!--Image Slide-->
<div class="Functs">
<!--Form Slide-->
<div class="slide current">
<div class="form">
<!--Asks for name-->
<label for="name">Enter Name</label>
<input type="text" id="name">
<br>
<br>
<!--Asks for email-->
<label for="eMail">Enter Email</label>
<input type="text" id="eMail">
<br>
<br>
<!--Submit Button-->
<button id="submit">Submit</button>
<!--Displays List-->
<br>
<br>
<label for="list">List of Users</label>
<input type="text" id="list">
</div>
</div>
<!--Array slide-->
<div class="slide"></div>
<div class="slide"></div>
<!--Calculator Slide-->
<div class="slide ">
<!--Calculator Algorithm-->
<div class="calculator">
<!--Grabs first number-->
<label for="num1">First Number</label>
<input type="number" id="num1" size="5">
<!--Grabs Second number-->
<label for="num2">Second Number</label>
<input type="number" id="num2" size="5">
<!--Enter Button-->
<button id="btn">Enter</button>
<!--Result-->
<input type="number" id="result">
</div>
</div>
</div>
<!--arrow buttons right-->
<div class="buTTon">
</i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
css
body{
margin: 0;
background-color: aliceblue;
}
.container {
margin-top: 0;
position: absolute;
overflow:hidden;
margin-right: 0;
background:rgb(55, 90, 207);
height:100vh;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
}
.slide.current{
position: relative;
background: grey;
height: 50vh;
width: 60%;
margin:10vw 25vh;
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 40vw;
}
.calculator{
background: green;
height:40vh;
width: 30vh;
padding: 5%;
line-height: 1.6em;
font-family: Georgia, 'Times New Roman', Times, serif ;
color: wheat;
}
.form{
background: green;
height:40vh;
width: 30vh;
padding: 5%;
line-height: 1.6em;
font-family: Georgia, 'Times New Roman', Times, serif ;
color: wheat;
}
.buTTon{
position: relative;
height: 40vh;
width: auto;
background:transparent;
margin-left: 20%;
display: flex;
justify-content: center;
align-items:center ;
}
#prev:hover, #next:hover{
background: white;
width: 60px;
height: 60px;
}
#prev, #next{
width:50px ;
height: 50px;
border-radius: 50%;
background:whitesmoke;
opacity: 0.7;
font-size: large;
}
.slide{
display: none;
}
/*for smaller screens*/
@media only screen and (max-width: 700px) and (min-width: 500px) {
.container {background: turquoise;
width: fit-content;
block-size: fit-content;
grid-template-columns: 4fr 1fr 4fr;
overflow: auto;
}
.slide.current {
width: 50%;
}
.buTTon{
position: relative;
height: 40vh;
width: fit-content;
block-size: fit-content;
}
#next{
position: absolute;
right:10px
}
#prev{
position: absolute;
left:10px
}
}
/*for medium screen*/
@media only screen and (min-width: 700px) and (max-width:900px) {
.container {background:red;
width: fit-content;
block-size: fit-content;
grid-template-columns: 1fr 1fr 1fr;
overflow: auto;
}
.slide.current {
width: 50%;
}
.slide {
width: 50%;
}
#next{
position: absolute;
right:10px
}
#prev{
position: absolute;
left:10px
}
}
@media only screen and (max-width:500px) {
body{
background: tomato;
}
.container {background:orange;
width: 100vw;
grid-template-columns: 1fr 2fr 1fr;
overflow: hidden;
}
.slide.current {
width: 80vw;
right:23vw;
}
.slide {
width: 20%;
}
#next{
position: absolute;
margin-right:-3rem;
}
#prev{
position: absolute;
margin-right: 0;
}
const form = document.querySelector('.form');
const submit =document.querySelector('.submit')
function onSubmit(e){
e.preventDefualt();
alert('sucess');
}
form.addEventListener('submit', onSubmit) ;
【问题讨论】：
-
e.preventDefualt()?!你的意思是e.preventDefault()？打开浏览器控制台并在那里查找错误... -
不知何故浏览器没有选择它。有 2 个错误，您和其他回答者分别发现了它们。谢谢。
标签： javascript submit