Javascript 未捕获类型错误：无法设置属性'；innerHTML'；

如果这是一篇重复的帖子，我很抱歉，我无法找到任何关于我的特殊问题的内容。因此，我使用Javascript验证表单以检查空字段，并使用method=“get”将数据推送到另一个html页面。在该页面上，从查询字符串中解释并显示数据。这是针对一个类的，我一直得到“uncaughttypeerror:无法将属性'innerHTML'设置为null”。我在下面提供了我所有的代码。如果有人能帮我弄清楚到底发生了什么，我将不胜感激。干杯

jpratt_Lab04-表格验证
//函数获取在第一页提交的数据，并在第二页显示它
函数getData（）{
//将formData设置为页面URL传入的查询字符串
var formData=location.search；
//从formData中提取字符，其中0是第一个字符
formData=formData.substring（1，formData.length）；
//将formData中的所有字符替换为“+”=>“和“=”=>：“和”%40“=>“@”
而（formData.indexOf（“+”）！=-1 | | formData.indexOf（“=”）！=-1）{
formData=formData.replace（“+”，“”）；
formData=formData.replace（“=”，“：”）；
//Firefox和Chrome使用%40作为电子邮件地址中的“@”字符
formData=formData.replace（“%40”和“@”）；
}
//将字符串formData拆分为数组，“&”是用于拆分字符串的分隔符
var interestList=“利息：”；
var formArray=formData.split（“&”）；
//将数组值写入第二页上的id
document.getElementById（“用户”）.innerHTML=formArray[0]；
document.getElementById（“email”）.innerHTML=formArray[1]；
document.getElementById（“密码”）.innerHTML=formArray[2]；
document.getElementById（“passwordConfirm”）.innerHTML=formArray[3]；
document.getElementById（“specialOffers”）.innerHTML=formArray[4]；
//创建报告兴趣的字符串“interestList”
对于（变量i=5；igetData（）

获取数据（）

获取数据（）

获取数据（）

获取数据（）

获取数据（）

jpratt_Lab04-表格验证
函数验证（）{
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错误=错误；
var userError=document.getElementById（'userWarning'）；
var emailError=document.getElementById（'emailWarning'）；
var passeror=document.getElementById（'passWarning'）；
var soError=document.getElementById（'soError'）；
试一试{
如果（user=''| | user=='请输入您的姓名..'）抛出userError.innerHTML='需要您的姓名'；
}
捕捉（错误）{
var误差=真；
犯错误
}
试一试{
如果（email=''| | email=='请输入您的电子邮件..'）抛出emailError.innerHTML='您的电子邮件是必需的'；
}
捕捉（错误）{
var误差=真；
犯错误
}
试一试{
如果（pass=''| | confirmPass=''）抛出passeror.innerHTML='需要密码'；
如果（pass！=confirmPass）抛出passeror.innerHTML='密码不匹配'；
}
捕捉（错误）{
var误差=真；
犯错误
}
试一试{
如果（specialOffers=''）抛出soError.innerHTML='您必须选择是或否'；
}
捕捉（错误）{
var误差=真；
犯错误
}
//var chkd=document.getElementByID['form']['interests'].value；
//警报（chkd）；
如果（错误==true）{
返回false；
}
否则{
}
}
网站注册表格
个人资料：

姓名：



电邮：


安全信息：

密码：


确认密码：


安全信息：

电子邮件特别提供：
对
不



兴趣：

娱乐

业务

音乐

购物

旅行

您的问题就在这里：

<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>

DOM自上而下进行解析，以便浏览器读取您的

#user

段落，然后停止以启动

getData（）

函数。函数开始执行

document.getElementById（“用户”）

，一切正常，然后它接着执行

document.getElementById（“电子邮件”）

，它抛出一个错误，原因很简单，因为浏览器仍然停留在

#用户

段落，并且它还没有解析

#电子邮件

段落

解决方法是删除

getData（），然后在HTML文档的末尾，即结束正文标记之前放置一个调用

一言以蔽之
<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>

// 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];