我已经把代码发送给我一封电子邮件时，提交按钮已按下，但它不是得到EmailJS，我找不到问题。
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="Javascript/Index.js"></script> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
    <script type="text/javascript">
    (function() {
    emailjs.init("lw-rGAeNYwJp6Ox5R");
    })();
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Squash Academy</title>
    <link rel="shortcut icon" href="Img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="Css/Stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
    <nav class="nav">
        <div id="name">PNBHS Squash Academy</div>
        <ul id="buttons-nav">
            <li class ='navbutton' id="homebutton">Home</li>
            <li class ='navbutton' id="coachbutton">Coaching</li>
            <li class ='navbutton' id="registerbutton">Register</li>
            <li id="contactbutton">Contact<img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
            </div> 
        </ul>
        <div id="mySidebar" class="sidebar">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
            <a href="Index.html">Home</a>
            <a href="Coaching.html">Coaching</a>
            <a href="Register.html">Register</a>

      </div>
      <div id="mainish">
          <button class="openbtn" onclick="openNav()">☰</button>  
          </div>
    </nav>
    <main id="main">
        <body>
            <div class="grid-container-register">
                <div class="grid-item-register">
                    <h1>PNBHS</h1>
                    <h3>Squash Academy</h3>
                </div>
                <div class="grid-item-register">
                  <form class="form" id="myForm">
    
                    <div class="flex">
                        <label>
                            <input required="" placeholder="" type="text" class="input" id="first-name">
                            <span>first name</span>
                        </label>
                  
                        <label>
                            <input required="" placeholder="" type="text" class="input" id="last-name">
                            <span>last name</span>
                        </label>
                    </div>  
                            
                    <label>
                        <input required="" placeholder="" type="email" class="input" id="email">
                        <span>email</span>
                    </label> 
                        
                    <label>
                        <input required="" type="tel" placeholder="" class="input" id="contact-number">
                        <span>contact number</span>
                    </label>
                    <label>
                        <textarea required="" rows="3" placeholder="" class="input01" id="message"></textarea>
                        <span>Parent/Caregiver Infomation</span>
                    </label>
                    
                    <button class="fancy" href="">
                      <span class="top-key"></span>
                      <span class="text">submit</span>
                      <span class="bottom-key-1"></span>
                      <span class="bottom-key-2"></span>
                    </button> 
                </form></div>
            </div>
        </body>
    </main>
</body>
  
<!--<canvas id="myCanvas" width="900" height="500" style="border:1px solid transparent"></canvas>
-->


</body>
</html>

JavaScript：

// Listening for form submit event.
document.querySelector('#myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent the form from submitting normally.

  const firstNameEl = document.querySelector('#first-name');
  const lastNameEl = document.querySelector('#last-name');
  const emailEl = document.querySelector('#email');
  const contactNumberEl = document.querySelector('#contact-number');
  const messageEl = document.querySelector('#message');

  if (firstNameEl && lastNameEl && emailEl && contactNumberEl && messageEl) {
    // Destructuring form values to variables.
    const {value: firstName } = firstNameEl;
    const {value: lastName } = lastNameEl;
    const {value: email } = emailEl;
    const {value: contactNumber } = contactNumberEl;
    const {value: message } = messageEl;

    // EmailJS template parameters.
    const templateParams = { firstName, lastName, email, contactNumber, message };

    // Sending email with EmailJS.
    emailjs.send('service_b73vwu6', 'template_f65ay7i', templateParams)
      .then(response => console.log('SUCCESS!', response.status, response.text))
      .catch(error => console.error('FAILED...', error));
  }

});

CSS：

body{
    margin: 0;
}
/* Nav*/
.nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#name{
    position: absolute;
    color: white;
    font-family: 'Raleway';
    font-size: 2.4vw;
    top: 0.8vw;
    left: 3vw;
    width: 35vw;
    margin: 0;
    padding: 0;
}

nav ul{
    list-style-type: none;
    margin: 0;
    margin-right: 0vw;
    padding: 0;
    float: right;
    width: 35vw;
}

nav li{
    display: inline-block;
    padding: 1.5vw;
    margin: 0;
    width: 5vw;
    text-align: center;
    color: white;
    height: 1.4vw;
    font-family: 'Raleway';
    position: relative;
}
.navbutton{
    border: #0c4eab solid;
    background-color: #0c4eab;
}
#contactbutton{
    background-color: #062857;
    border-radius: 50px;
    width: 6vw;
}

#contactimg{
    width: 10px;
    height: 10px;

}
/*End NAv*/
/*Side Bar*/
#mySidebar {
    height: 30vw;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-radius: 0, 20px,0,0;
  }
  .sidebar a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    position:fixed; top:1vw; right:1vw;
    
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  #mainish {
    display: none;    
}
/*ENd Sidebar*/

/*Main*/
.main{
    background-color: #030821;
    height: 800px;
}
.grid-container-index{
    display: grid;
    grid-template-columns: 31vw 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-index {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}

@media only screen and (max-width: 1200px) {
    nav ul{
        display: none;
    }
    #mainish {
        display: inline-block;
        
    }
}

.grid-container-register{
    display: grid;
    grid-template-columns: 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-register {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}
/* Register*/
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #030821;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.message {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
  background-color: #030821;
}
.form input {
    color: #fff;
}
.form textarea {
    color: #fff;
}
.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821 ;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.input01 {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821;

}

.form label .input01 + span {
  position: absolute;
  left: 10px;
  top: 50px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input01:placeholder-shown + span {
  top: 40px;
  font-size: 0.9em;
}

.form label .input01:focus + span,.form label .input01:valid + span {
  top: 50px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input01:valid + span {
  color: green;
}

.fancy {
  background-color: transparent;
  border: 2px solid #cacaca;
  border-radius: 0px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 390;
  letter-spacing: 2px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
  content: " ";
  width: 1.7rem;
  height: 2px;
  background: #cacaca;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform: translateX(230%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: lowercase;
  text-decoration: none;
  color: #818181;
  transform: translateX(30%);
}

.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
  color: white;
  background: #030821;
}

.fancy:hover::before {
  width: 1.5rem;
  background: white;
}

.fancy:hover .text {
  color: white;
  padding-left: 1.5em;
}

.fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

我已经改变了几次代码，但我甚至不能告诉什么是问题，我只知道，它是不给我发送电子邮件时，提交按钮被击中。

1条答案

按热度按时间

rqcrx0a61#

文件<head>中的初始脚本调用需要defer或async标签。

替换为**<script src="Javascript/Index.js" defer></script>**
如果不使用defer或async，当浏览器请求脚本文件时解析器停止时，document.querySelector()返回null，则抛出 * Uncatch TypeError*，因为HTML尚未加载，<form>对象尚未被示例化。
虽然defer或async不是唯一的修复，但它们是最现代的。
有很多不同的方法来解决这个问题，这里提供了一个更深入的解释，希望能帮助你选择最好的方法。

赞(0）回复(0）举报 2023-06-25

css 我的HTML没有到达EmailJS，所以获取电子邮件

1条答案

相关问题

热门标签

最新问答