javascript - 为什么这段代码没有运行？它没有返回简单的警报

问题描述

这是一个相当短而直接的代码。它等待提交并在发生时提醒“成功”。但是什么都没有发生，也没有显示错误。我尝试过做一些细微的变化并使用箭头功能，但似乎没有任何效果。我对 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) ;

标签： javascriptsubmit

javascript - 为什么这段代码没有运行？它没有返回简单的警报

问题描述

解决方案

推荐阅读