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

编程问答 2022-05-10

问题描述

这是一个相当简短和直接的代码。它等待提交并在发生时提醒“成功”。但是什么也没发生，也没有显示错误。我试过做一些细微的变化并使用箭头函数，但似乎没有任何效果。我对 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,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 列表中找到该表单。

我还使用 form[name = 'userinfo'] 更改了用于选择表单的 CSS 选择器。

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,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>

javascriptsubmit