如果这是重复的帖子，我很抱歉，我无法找到任何可以解决我特定问题的内容。所以我使用Javascript来验证表单以检查空字段，并且我使用method =“get”将数据推送到另一个html页面。在该页面上，数据将从查询字符串中解释并显示。这是一个类，我一直得到“未捕获的TypeError：无法设置属性'innerHTML'为null”。我在下面提供了所有代码。我真的很感激任何帮助，弄清楚发生了什么。欢呼声。
<--Form Submit.htm-->
<!DOCTYPE html>
<html>
<head>
<title>jpratt_Lab04-Form Validation</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
// Function gets data submitted on first page and displays it on the second page
function getData() {
// Set formData to the query string passed in by the page URL
var formData = location.search;
// Extract the characters from formData where 0 is the first character
formData = formData.substring(1, formData.length);
// Replace all characters in formData as "+" => " " AND "=" => ": " AND "%40" => "@"
while (formData.indexOf("+") != -1 || formData.indexOf("=") != -1) {
formData = formData.replace("+", " ");
formData = formData.replace("=", ": ");
// Firefox and Chrome use %40 for the "@" char in email address
formData = formData.replace("%40", "@");
}
// Split the string formData into an array, "&" is the delimiter used to split string
var interestList = "Interests: ";
var formArray = formData.split("&");
// Write array values to id's on the second page
document.getElementById("user").innerHTML = formArray[0];
document.getElementById("email").innerHTML = formArray[1];
document.getElementById("password").innerHTML = formArray[2];
document.getElementById("passwordConfirm").innerHTML = formArray[3];
document.getElementById("specialOffers").innerHTML = formArray[4];
// Create a string “interestList” of reported interests
for (var i = 5; i < formArray.length; i++) {
interestList += formArray[i].substring(11) + ", ";
}
document.getElementById("interests").innerHTML = interestList;
}
</script>
</head>
<body>
<header>
<h1>Website Registration Form</h1>
</header>
<article>
<h2>Your Submitted Information:</h2>
<p id="user"><script>getData();</script></p>
<p id="email"><script>getData();</script></p>
<p id="password"><script>getData();</script></p>
<p id="passwordConfirm"><script>getData();</script></p>
<p id="specialOffers"><script>getData();</script></p>
<p id="interests"><script>getData();</script></p>
</article>
</body>
</html>
<--index.htm-->
<!DOCTYPE html>
<html>
<head>
<title>jpratt_Lab04-Form Validation</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function validate() {
var user = document.forms['form']['user'].value;
var email = document.forms['form']['email'].value;
var pass = document.forms['form']['pass'].value;
var confirmPass = document.forms['form']['confirmPass'].value;
var specialOffers = document.forms['form']['specialOffers'].value;
var errors = false;
var userError = document.getElementById('userWarning');
var emailError = document.getElementById('emailWarning');
var passError = document.getElementById('passWarning');
var soError = document.getElementById('soError');
try {
if (user == '' || user == 'Please enter your name..') throw userError.innerHTML = 'Your name is required.';
}
catch (err) {
var errors = true;
err;
}
try {
if (email == '' || email == 'Please enter your email..') throw emailError.innerHTML = 'Your email is required.';
}
catch (err) {
var errors = true;
err;
}
try {
if (pass == '' || confirmPass == '') throw passError.innerHTML = 'Password is required.';
if (pass != confirmPass) throw passError.innerHTML = 'Passwords do not match.';
}
catch (err) {
var errors = true;
err;
}
try {
if (specialOffers == '') throw soError.innerHTML = 'You must select yes or no.';
}
catch (err) {
var errors = true;
err;
}
// var chkd = document.getElementByID['form']['interests'].value;
// alert(chkd);
if (errors == true) {
return false;
}
else {
}
}
</script>
</head>
<body>
<header>
<h1>Website Registration Form</h1>
</header>
<article>
<form name="form" method="get" enctype="application/x-www-form-urlencoded" action="form-submit.htm" onsubmit="return validate()">
<h2>Personal Information:</h2>
<p>
<label name="user">Name:</label>
<input type="text" name="name" id="user" value="Please enter your name.." />
</p>
<p id="userWarning" class="alert"></p>
<p>
<label name="email">Email:</label>
<input type="text" name="email" id="email" value="Please enter your email.." />
</p>
<p id="emailWarning" class="alert"></p>
<h2>Security Information:</h2>
<p>
<label name="pass">Password:</label>
<input type="password" name="pass" id="pass" />
</p>
<p>
<label name="confirmPass">Confirm Password:</label>
<input type="password" name="confirmPass" id="confirmPass" />
</p>
<p id="passWarning" class="alert"></p>
<h2>Security Information:</h2>
<p class="alignleft">
<label name="specialOffers">E-mail Specail Offers:</label>
<input type="radio" name="specialOffers" id="specialOffers" value="true" />Yes
<input type="radio" name="specialOffers" id="specialOffers" value="false" />No
</p>
<p id="soError" class="alert"></p>
<p class="alignleft">
<label name="interests">Interests:</label><br>
<input type="checkbox" name="interests" id="entertaiment" value="entertainment" />Entertainment<br>
<input type="checkbox" name="interests" id="interests" value="business" />Business<br>
<input type="checkbox" name="interests" id="interests" value="music" />Music<br>
<input type="checkbox" name="interests" id="interests" value="shopping" />Shopping<br>
<input type="checkbox" name="interests" id="interests" value="travel" />Travel
</p>
<p id="interestError" class="alert"></p>
<p class="buttons">
<input type="submit" />
<input type="reset" value="Reset"/>
</p>
</form>
</article>
<footer></footer>
</body>
</html>
答案 0 :(得分：2)
你的问题在这里：
<p id="user"><script>getData();</script></p>
<p id="email"><script>getData();</script></p>
<p id="password"><script>getData();</script></p>
<p id="passwordConfirm"><script>getData();</script></p>
<p id="specialOffers"><script>getData();</script></p>
<p id="interests"><script>getData();</script></p>
你正在调用函数getData() 6次，你只需要调用一次，因为你已经在函数中使用了它：
// Write array values to id's on the second page
document.getElementById("user").innerHTML = formArray[0];
document.getElementById("email").innerHTML = formArray[1];
document.getElementById("password").innerHTML = formArray[2];
document.getElementById("passwordConfirm").innerHTML = formArray[3];
document.getElementById("specialOffers").innerHTML = formArray[4];
DOM从上到下解析，因此浏览器会读取您的#user段，然后停止启动getData()功能。你的函数可以执行document.getElementById("user")并且一切正常，然后它会执行document.getElementById("email")，它只会因为你的浏览器仍然停留在#user段而引发错误并且它还没有解析#email段。
解决方法是从所有代码中删除<script>getData();</script>，然后在HTML文档的末尾放置一个调用，就在结束正文标记之前。
简而言之，这是库通常加载到head标签上的主要原因之一，而所有自定义代码（包括DOM操作）通常都会在最后加载。