通过MDN闭包这个内容实践闭包,中有有一个例子提示TypeError:document.getEleementById(...)is null
代码地址如下:https://developer.mozilla.org...
我敲的代码如下:
<!doctype html>
<html>
<head>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
</style>
<script>
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
</script>
</head>
<body>
<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
</body>
</html>
报错信息如下:
TypeError:document.getEleementById(...)is null
把
script
标签放到body
标签下方即可,主要问题是script解析的时候页面结构还没渲染,因此报错为null