Javascript 未捕获类型错误：无法设置属性'；聚焦'；空的

我正在尝试学习JavaScript，我正在构建这个基本教程。在尝试演示onfocus和onblur时，我在JavaScript控制台中收到以下错误消息：uncaughttypeerror:无法将属性“onfocus”设置为null

这是我的密码。我刚开始学习JavaScript，真的需要一些帮助

//alert("Hello, world!"); 
// this is a JavaScript alert button 
//
var year = 2014;
var userEmail = "";
var todaysDate = "";
/*var donation = 20;

if (donation < 20) {
    alert("For a $20 you get a cookie. Change your donation?");
}
else {
    alert("Thank you!");
} */

var mainfile = document.getElementById("mainTitle");
console.log("This is an element of type: ", mainTitle.nodeType);
console.log("The inner HTML is ", mainTitle.innerHTML);
console.log("Child nodes: ", mainTitle.childNodes.length);

var myLinks = document.getElementsByTagName("a");
console.log("Links: ", myLinks.length);

var myListElements = document.getElementsByTagName("li");
console.log("List elements: ", myListElements.length);

var myFirstList = document.getElementById("2 paragraphs");
/* you can also use: var limitedList = myFirstList.getElementsByTagName("li");
to dig deeper into the DOM */
var myElement = document.createElement("li");
var myNewElement = document.createElement("li");
//myNewElement.appendChild(myNewElement); 

var myText = document.createTextNode("New list item");
myNewElement.appendChild(myText); 

// creating elements
var newListItem = document.createElement("li");
var newPara = document.createElement("p");

// To add content, either use inner HTML
// or create child nodes manually like so:
// newPara.innerHTML = "blah blah blah...";
var paraText = document.createTextNode("And now for a beginner level intro to JavaScript! YAY!");
newPara.appendChild(paraText);

//And we still need to attach them to the document
document.getElementById("basic").appendChild(newPara);

var myNewElement = document.createElement("li");
var secondItem = myElement.getElementsByTagName("li")[1];
myElement.insertBefore(myNewElement, secondItem);

// An example of using an anonymous function: onclick.
//When you click anywhere on the page, an alert appears.
//document.onclick = function() {
//  alert("You clicked somewhere in the document");
//}

// And example of restricting the click alert to 
// an element on the page.
var myImage = document.getElementById("mainImage");
myImage.onclick = function() {
    alert("You clicked on the picture!");
}

function prepareEventHandlers() {
    var myImage = document.getElementById("mainImage");
    myImage.onclick = function() {
      alert("You clicked on the picture!");
    }
    //onfocus and onblur event handler illustration
    var emailField = document.getElementById("email");
    emailField.onfocus = function() {
    if (emailField.value == "your email") {
        emailField.value = "";
    }
};

    emailField.onblur = function() {
    if (emailField.value == "") {
        emailField.value = "your email";
    }
};

}


window.onload = function() {
    // preps everything and ensures 
    // other js functions don't get
    // called before document has
    // completely loaded.
    prepareEventHandlers(); // This is a named function call nested inside an anonymous function.
}



//Sometimes we want js to run later or call a
// function in 60 seconds or every 5 sec, etc.
// Two main methods for timers: setTimeout and setInterval
// these timer functions are in milliseconds

var myImage = document.getElementById("mainImage");
var imageArray = ["images/Blue-roses.jpg", "images/Purple-Rose.jpg", "images/White-Rose.jpg", "images/orange-rose.jpg", "images/pink-roses.jpg", "images/red-roses.jpg", "images/yellow-roses.jpg", "images/murdock.jpg", "images/dorothy-red-ruby-slippers.jpg"];
var imageIndex = 0;

function changeImage(){
    myImage.setAttribute("src",imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}
setInterval(changeImage, 5000);

//Sometimes we may want some random alert
// to pop up x-number of seconds later.
//So we use the setTimeout, like so:
/*function simpleMessage() {
    alert("Get ready to learn!");
}
setTimeout(simpleMessage, 5000); */

/*var_dump($_POST);
  if var_dump($_POST) = "";
  return var($_GET); 
  error_log($_POST); */

//警报（“你好，世界！”）；
//这是一个JavaScript警报按钮
//
风险值年份=2014年；
var userEmail=“”；
var todaysDate=“”；
/*var=20；
如果（捐赠<20）{
提醒（“20美元你就可以得到一块饼干。改变你的捐款吗？”）；
}
否则{
警惕（“谢谢！”）；
} */
var mainfile=document.getElementById（“maintTitle”）；
log（“这是一个类型为：”，mainttitle.nodeType的元素）；
log（“内部HTML为”，mainttitle.innerHTML）；
log（“子节点：”，mainttitle.childNodes.length）；
var myLinks=document.getElementsByTagName（“a”）；
log（“Links:，myLinks.length”）；
var myListerElements=document.getElementsByTagName（“li”）；
log（“列表元素：”，myListenements.length）；
var myFirstList=document.getElementById（“2段”）；
/*您还可以使用：var limitedList=myFirstList.getElementsByTagName（“li”）；
深入挖掘DOM*/
var myElement=document.createElement（“li”）；
var myNewElement=document.createElement（“li”）；
//appendChild（myNewElement）；
var myText=document.createTextNode（“新列表项”）；
myNewElement.appendChild（myText）；
//创建元素
var newListItem=document.createElement（“li”）；
var newPara=document.createElement（“p”）；
//要添加内容，请使用内部HTML
//或者手动创建子节点，如下所示：
//newPara.innerHTML=“诸如此类……”；
var paraText=document.createTextNode（“现在是JavaScript的入门介绍！耶！”）；
新段落附录（副文本）；
//我们还需要把它们附在文件上
document.getElementById（“basic”）.appendChild（newPara）；
var myNewElement=document.createElement（“li”）；
var secondItem=myElement.getElementsByTagName（“li”）[1]；
insertBefore（myNewElement，第二项）；
//使用匿名函数的示例：onclick。
//单击页面上的任意位置时，将显示一条警报。
//document.onclick=函数（）{
//警报（“您单击了文档中的某个位置”）；
//}
//以及将单击警报限制为的示例
//页面上的一个元素。
var myImage=document.getElementById（“mainImage”）；
myImage.onclick=function（）{
警告（“你点击了图片！”）；
}
函数prepareEventHandlers（）{
var myImage=document.getElementById（“mainImage”）；
myImage.onclick=function（）{
警告（“你点击了图片！”）；
}
//onfocus和onblur事件处理程序说明
var emailField=document.getElementById（“电子邮件”）；
emailField.onfocus=函数（）{
如果（emailField.value==“您的电子邮件”）{
emailField.value=“”；
}
};
emailField.onblur=函数（）{
如果（emailField.value==“”）{
emailField.value=“您的电子邮件”；
}
};
}
window.onload=函数（）{
//准备一切并确保
//其他js函数无法获得
//在文档结束之前调用
//满载的。
prepareEventHandlers（）；//这是嵌套在匿名函数中的命名函数调用。
}
//有时我们希望js稍后运行或调用
//60秒或每5秒运行一次，以此类推。
//计时器的两种主要方法：setTimeout和setInterval
//这些计时器功能以毫秒为单位
var myImage=document.getElementById（“mainImage”）；
var imageArray=[“images/Blue roses.jpg”、“images/Purple Rose.jpg”、“images/White Rose.jpg”、“images/orange Rose.jpg”、“images/pink Rose.jpg”、“images/red Rose.jpg”、“images/yellow Rose.jpg”、“images/murdock.jpg”、“images/dorothy red ruby slippeters.jpg]；
var指数=0；
函数changeImage（）{
setAttribute（“src”，imageArray[imageIndex]）；
imageIndex++；
如果（imageIndex>=imageArray.length）{
imageIndex=0；
}
}
设置间隔（changeImage，5000）；
//有时我们可能需要一些随机警报
//以在秒数后弹出x。
//所以我们使用setTimeout，如下所示：
/*函数simpleMessage（）{
警惕（“准备好学习！”）；
}
设置超时（simpleMessage，5000）*/
/*变量转储（$\u POST）；
如果var_dump（$_POST）=“”；
返回var（$\u GET）；
错误日志（$\u POST）*/

如果它给了您这个错误，那么它意味着

document.getElementById（“email”）

的计算结果为

null

，这意味着id

email

中不存在任何元素

---

这就是我所能告诉你的，而不需要看到这个JS所连接的HTML。

谢谢你，Astro。我又重新检查了我的HTML中该元素的id，出于某种奇怪的原因，我设置了id=“name”而不是id=“email”，所以我现在修复了它，解决了这个问题，你的答案非常合理。非常感谢。