为什么这段代码不是运行？它没有返回一个简单的警报
Why is this code not running? It is not returning a simple alert
这是一个相当简短直接的代码。它等待提交并在发生时提醒“成功”。但是什么也没有发生，也没有错误显示。我试过做一些小的改动并使用箭头函数，但似乎没有任何效果。我是 Java 的新手，我写的很多代码都有错误，但这段代码似乎太简单了，不会有错误。
下面是Java脚本：
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) ;
<div class="form">
提交事件不会在 div 元素上触发，仅在表单元素上触发。
提交事件只发生在表单元素中。因此，将按钮放在表单元素内会触发此事件。如果您为表单命名（如我的示例中的 name="userinfo"），则很容易在 document.forms 列表中找到该表单。
我还更改了 CSS 选择器以选择带有 form[name = 'userinfo'] 的表单。
const form = document.forms.userinfo;
function onSubmit(e) {
e.preventDefault();
alert('sucess');
}
form.addEventListener('submit', onSubmit);
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[name = 'userinfo'] {
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;
}
<!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">
<form name="userinfo">
<!--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>Submit</button>
<!--Displays List-->
<br>
<br>
<label for="list">List of Users</label>
<input type="text" id="list">
</form>
</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">
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
这是一个相当简短直接的代码。它等待提交并在发生时提醒“成功”。但是什么也没有发生，也没有错误显示。我试过做一些小的改动并使用箭头函数，但似乎没有任何效果。我是 Java 的新手，我写的很多代码都有错误，但这段代码似乎太简单了，不会有错误。
下面是Java脚本：
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) ;
<div class="form">
提交事件不会在 div 元素上触发，仅在表单元素上触发。
提交事件只发生在表单元素中。因此，将按钮放在表单元素内会触发此事件。如果您为表单命名（如我的示例中的 name="userinfo"），则很容易在 document.forms 列表中找到该表单。
我还更改了 CSS 选择器以选择带有 form[name = 'userinfo'] 的表单。
const form = document.forms.userinfo;
function onSubmit(e) {
e.preventDefault();
alert('sucess');
}
form.addEventListener('submit', onSubmit);
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[name = 'userinfo'] {
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;
}
<!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">
<form name="userinfo">
<!--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>Submit</button>
<!--Displays List-->
<br>
<br>
<label for="list">List of Users</label>
<input type="text" id="list">
</form>
</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">
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</body>
<script src="main.js"></script>
</html>