3
对不起，如果这是一个重复帖子，我一直无法找到任何涉及我的特定问题的东西。所以我使用Javascript来验证表单以检查空字段，并且我使用method =“get”将数据推送到另一个html页面。在该页面上，数据从查询字符串中解释并显示。这是为一个类，我不断得到“Uncaught TypeError：无法设置null的属性'innerHTML'”。我在下面提供了我所有的代码。我真的很感激任何帮助搞清楚发生了什么。干杯。Uncaught TypeError：无法设置属性'innerHTML'
<--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>
该DOM尚未加载，所以你不能得到不存在的东西。 –