闭包问题,提示TypeError:document:getElementById...

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

阅读 2.8k
3 个回答

script标签放到body标签下方即可,主要问题是script解析的时候页面结构还没渲染,因此报错为null

把函数调用放到window.onload里也可以解决

文档是从上而下执行的,必须是加载好存在的情况下才能去调用

推荐问题