Javascript TypeError:无法读取属性'；类列表'；空的
我犯了一个错误Javascript TypeError:无法读取属性'；类列表'；空的,javascript,dom,Javascript,Dom,我犯了一个错误 TypeError: Cannot read property 'classList' of null 我不确定我在为每个表单字段操作DOM元素时犯了什么错误。我的表单字段有一个声明的表单名称和ID，每个输入字段也有一个字段的名称和ID。但我还是犯了一个错误 我做错了什么 我的剧本： document.querySelector("#form").addEventListener("submit", function(e){ //create variable for cont
TypeError: Cannot read property 'classList' of null
document.querySelector("#form").addEventListener("submit", function(e){
//create variable for contact form url
var formURL = 'melonForm.php';
//prevent default submission
event.preventDefault();
//define form fields
var melonForm = {
'firstName' : document.querySelector('input[name=firstName]').value,
'lastName' : document.querySelector('input[name=lastName]').value,
'companyName' : document.querySelector('input[name=companyName]').value,
'companyAddress' : document.querySelector('input[name=companyAddress]').value,
'city' : document.querySelector('input[name=city]').value,
'state' : document.querySelector('select[name=state]').value,
'zipcode' : document.querySelector('input[name=zipcode]').value,
'emailAddress' : document.querySelector('input[name=emailAddress]').value,
'phoneNumber' : document.querySelector('input[name=phoneNumber]').value,
}
//define request variable
var formRequest = new Request(formURL, {
method: 'POST',
body: melonForm,
headers: new Headers()
});
//fetch
fetch(formRequest)
.then(function(formResponse) {
return formResponse.json();
})
.then(function(data) {
//handle server responses
if ( ! data.success) {
//handle error messages
//handle error message for firstName
console.log(data);
if (data.errors.firstName) {
document.getElementById("firstName").classList.add("has-error");
document.getElementById("firstName").appendChild('<div class="help-block">' + data.errors.firstName + '</div>');
}
//handle errors for lastName
if (data.errors.lastName) {
document.getElementById("lastName").classList.add("has-error");
document.getElementById("lastName").appendChild('<div class="help-block">' + data.errors.lastName + '</div>');
}
//handle errors for companyName
if (data.errors.companyName) {
document.getElementById("companyName").classList.add("has-error");
document.getElementById("companyName").appendChild('<div class="help-block">' + data.errors.companyName + '</div>');
}
//handle errors for companyAddress
if (data.errors.companyAddress) {
document.getElementById("companyAddress").classList.add("has-error");
document.getElementById("companyAddress").appendChild('<div class="help-block">' + data.errors.companyAddress + '</div>');
}
//handle errors for city
if (data.errors.city) {
document.getElementById("city").classList.add("has-error");
document.getElementById("city").appendChild('<div class="help-block">' + data.errors.city + '</div>');
}
//handle errors for state
if (data.errors.state) {
document.getElementById("state").classList.add("has-error");
document.getElementById("statea").appendChild('<div class="help-block">' + data.errors.state + '</div>');
}
//handle errors for zipcode
if (data.errors.zipcode) {
document.getElementById("zipcode").classList.add("has-error");
document.getElementById("zipcode").appendChild('<div class="help-block">' + data.errors.zipcode + '</div>');
}
//handle errors for emailAddress
if (data.errors.emailAddress) {
document.getElementById("emailAddress").classList.add("has-error");
document.getElementById("emailAddress").appendChild('<div class="help-block">' + data.errors.emailAddress + '</div>');
}
//handle errors for phoneNumber
if (data.errors.phoneNumber) {
document.getElementById("phoneNumber").classList.add("has-error");
document.getElementById("phoneNumber").appendChild('<div class="help-block">' + data.errors.phoneNumber + '</div>');
}
// handle errors for captcha ---------------
if (data.errors.captcha) {
swal({
title: "Error!",
text: data.errors.captcha,
icon: "error",
});
}
// handle errors for phpmailer ---------------
if (data.message) {
swal({
title: "Error!",
text: data.message,
icon: "error",
});
}
else {
//handle success messages
swal({
title: "Success!",
text: data.message,
icon: "success",
});
document.getElementById("form").reset();
}
}
});
})
document.querySelector（“表单”）.addEventListener（“提交”，函数（e）{
//为联系人表单url创建变量
var formURL='melonForm.php'；
//防止默认提交
event.preventDefault（）；
//定义表单字段
变量melonForm={
“firstName”：document.querySelector（'input[name=firstName]”）。值，
“lastName”：document.querySelector（'input[name=lastName]”）。值，
“companyName”：document.querySelector（'input[name=companyName]”）。值，
“companyAddress”：document.querySelector（'input[name=companyAddress]”）。值，
“城市”：document.querySelector（'input[name=city]”）。值，
“状态”：document.querySelector（'select[name=state]”）。值，
“zipcode”：document.querySelector（'input[name=zipcode]”）。值，
“emailAddress”：document.querySelector（'input[name=emailAddress]”）。值，
“phoneNumber”：document.querySelector（'input[name=phoneNumber]）。值，
}
//定义请求变量
var formRequest=新请求（formURL{
方法：“POST”，
身体：蜜瓜状，
标题：新标题（）
});
//取回
获取（formRequest）
.then（函数（formResponse）{
返回formResponse.json（）；
})
.then（功能（数据）{
//处理服务器响应
如果（！data.success）{
//处理错误消息
//处理firstName的错误消息
控制台日志（数据）；
if（data.errors.firstName）{
document.getElementById（“firstName”）.classList.add（“有错误”）；
document.getElementById（“firstName”）.appendChild（“”+data.errors.firstName+“”）；
}
//处理lastName的错误
if（data.errors.lastName）{
document.getElementById（“lastName”）.classList.add（“有错误”）；
document.getElementById（“lastName”）.appendChild（“”+data.errors.lastName+“”）；
}
//处理companyName的错误
if（data.errors.companyName）{
document.getElementById（“companyName”）.classList.add（“有错误”）；
document.getElementById（“companyName”）.appendChild（“”+data.errors.companyName+“”）；
}
//处理公司地址的错误
if（data.errors.companyAddress）{
document.getElementById（“companyAddress”）.classList.add（“有错误”）；
document.getElementById（“companyAddress”）.appendChild（“”+data.errors.companyAddress+“”）；
}
//为城市处理错误
if（data.errors.city）{
document.getElementById（“城市”）.classList.add（“有错误”）；
document.getElementById（“城市”）.appendChild（“”+data.errors.city+“”）；
}
//处理状态的错误
if（data.errors.state）{
document.getElementById（“state”）.classList.add（“有错误”）；
document.getElementById（“statea”）.appendChild（“”+data.errors.state+“”）；
}
//处理zipcode的错误
if（data.errors.zipcode）{
document.getElementById（“zipcode”）.classList.add（“有错误”）；
document.getElementById（“zipcode”）.appendChild（“”+data.errors.zipcode+“”）；
}
//处理emailAddress的错误
if（data.errors.emailAddress）{
document.getElementById（“emailAddress”）.classList.add（“有错误”）；
document.getElementById（“emailAddress”）.appendChild（“”+data.errors.emailAddress+“”）；
}
//处理phoneNumber的错误
if（数据.错误.电话号码）{
document.getElementById（“电话号码”）.classList.add（“有错误”）；
document.getElementById（“phoneNumber”）.appendChild（“”+data.errors.phoneNumber+“”）；
}
//为验证码处理错误---------------
if（data.errors.captcha）{
游泳({
标题：“错误！”，
文本：data.errors.captcha，
图标：“错误”，
});
}
//处理phpmailer的错误---------------
if（data.message）{
游泳({
标题：“错误！”，
text:data.message，
图标：“错误”，
});
}
否则{
//处理成功消息
游泳({
标题：“成功！”，
text:data.message，
图标：“成功”，
});
document.getElementById（“表单”）.reset（）；
}
}
});
})
<html>
<head>
<title>Melon Form</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Contact Form</h1>
<!-- OUR FORM -->
<form name="form" id="form" action="melonForm.php" method="POST">
<!-- FIRST NAME -->
<div id="firstName-group" class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" name="firstName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- LAST NAME -->
<div id="lastName-group" class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" name="lastName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- COMPANY NAME -->
<div id="companyName-group" class="form-group">
<label for="companyName">Company Name:</label>
<input type="text" class="form-control" name="companyName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- COMPANY ADDRESS -->
<div id="companyAddress-group" class="form-group">
<label for="companyAddress">Company Address:</label>
<input type="text" class="form-control" name="companyAddress" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- CITY -->
<div id="city-group" class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" name="city" id="city" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<div id="state-group" class="form-group">
<label for="state">State</label>
<select id="state" name="state" class="form-control">
<option value="" selected>Choose...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<!-- ZIPCODE -->
<div id="zipcode-group" class="form-group">
<label for="zipcode">Zipcode:</label>
<input type="text" class="form-control" name="zipcode" id="zipcode" placeholder="12345">
<!-- errors will go here -->
</div>
<!-- EMAIL ADDRESS -->
<div id="emailAddress-group" class="form-group">
<label for="emailAddress">Email Address:</label>
<input type="text" class="form-control" name="emailAddress" placeholder="rudd@avengers.com">
<!-- errors will go here -->
</div>
<!-- PHONE NUMBER -->
<div id="phoneNumber-group" class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="text" class="form-control" name="phoneNumber" id="phoneNumber" placeholder="12345">
<!-- errors will go here -->
</div>
<!-- MESSAGE -->
<div id="message-group" class="form-group">
<label for="message">Message:</label>
<input type="text" class="form-control" name="message" placeholder="Ant Man">
<!-- errors will go here -->
</div>
<!-- GOOGLE RECAPTCHA -->
<div class="form-group">
<div class="g-recaptcha" data-sitekey="SECRET_KEY"></div>
</div>
<button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>
</form>
</div>
<script src="melonForm.js" defer></script> <!-- load our javascript file -->
</body>
<script src='https://www.google.com/recaptcha/api.js'></script>
</html>
瓜形
联系方式
名字：
姓氏：
公司名称：
公司地址：
城市：
陈述
选择。。。
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
哥伦比亚特区
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布
var myElement = document.querySelector("#my-element");
myElement.addEventListener("event", handler);
$(window).ready(()=>{
var myElement = document.querySelector("#my-element");
myElement.addEventListener("event", handler);
});
window.addEventListener("load", ()=>{
var myElement = document.querySelector("#my-element");
myElement.addEventListener("event", handler);
});