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尚未加載，所以你不能得到不存在的東西。 –