menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

JS控制台显示cannot read property ‘getElementsByTagName‘ of null怎么办

武飞扬头像
暖暖胖胖
帮助1人

事件说明：

自己动手写了个js，运行，控制台报错：

学新通

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>全选</title>
  6.  
    <script>
  7.  
    var cbAll = document.getElementById("cbAll");
  8.  
    var tbs = document.getElementById("tb").getElementsByTagName("input");
  9.  
    cbAll.onclick=function(){
  10.  
    console.log(cbAll.checked);
  11.  
    for(var i = 0;i < tbs.length;i ){
  12.  
    tbs[i].checked=cbAll.checked;
  13.  
    }
  14.  
    }
  15.  
     
  16.  
    for (var i = 0;i < tbs.length;i ){
  17.  
    tbs[i].onclick=function(){
  18.  
    var flag=true;
  19.  
    for (var i = 0;i < tbs.length;i ){
  20.  
    if(!tbs[i].checked){
  21.  
    flag = false;
  22.  
    }
  23.  
    }
  24.  
    cbAll.checked=flag;
  25.  
    }
  26.  
    }
  27.  
     
  28.  
    </script>
  29.  
    </head>
  30.  
    <body>
  31.  
    <table class="box">
  32.  
    <thead>
  33.  
    <tr>
  34.  
    <th><input type="checkbox" id="cbAll" ></th>
  35.  
    <th>价格</th>
  36.  
    <th>商品</th>
  37.  
    </tr>
  38.  
    </thead>
  39.  
    <tbody id="tb">
  40.  
    <tr>
  41.  
    <td>
  42.  
    <input type="checkbox">
  43.  
    </td>
  44.  
    <td>
  45.  
    30
  46.  
    </td>
  47.  
    <td>
  48.  
    荔枝
  49.  
    </td>
  50.  
    </tr>
  51.  
    <tr>
  52.  
    <td>
  53.  
    <input type="checkbox">
  54.  
    </td>
  55.  
    <td>
  56.  
    29
  57.  
    </td>
  58.  
    <td>
  59.  
    哈密瓜
  60.  
    </td>
  61.  
    </tr>
  62.  
    <tr>
  63.  
    <td>
  64.  
    <input type="checkbox">
  65.  
    </td>
  66.  
    <td>
  67.  
    28
  68.  
    </td>
  69.  
    <td>
  70.  
    苹果
  71.  
    </td>
  72.  
    </tr>
  73.  
    </tbody>
  74.  
    </table>
  75.  
    </body>
  76.  
    </html>
学新通

 查了一下，很多网友说是因为导航栏部分没有设置id导致。
后来发现是script放在了head中，如果没有设置window.onload，那么JS在html加载之前就会被解析，相应的就取不到html中的元素了。所以把js相关代码放到相关html后面就好了。

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>全选</title>
  6.  
     
  7.  
    </head>
  8.  
    <body>
  9.  
    <table class="box">
  10.  
    <thead>
  11.  
    <tr>
  12.  
    <th><input type="checkbox" id="cbAll" ></th>
  13.  
    <th>价格</th>
  14.  
    <th>商品</th>
  15.  
    </tr>
  16.  
    </thead>
  17.  
    <tbody id="tb">
  18.  
    <tr>
  19.  
    <td>
  20.  
    <input type="checkbox">
  21.  
    </td>
  22.  
    <td>
  23.  
    30
  24.  
    </td>
  25.  
    <td>
  26.  
    荔枝
  27.  
    </td>
  28.  
    </tr>
  29.  
    <tr>
  30.  
    <td>
  31.  
    <input type="checkbox">
  32.  
    </td>
  33.  
    <td>
  34.  
    29
  35.  
    </td>
  36.  
    <td>
  37.  
    哈密瓜
  38.  
    </td>
  39.  
    </tr>
  40.  
    <tr>
  41.  
    <td>
  42.  
    <input type="checkbox">
  43.  
    </td>
  44.  
    <td>
  45.  
    28
  46.  
    </td>
  47.  
    <td>
  48.  
    苹果
  49.  
    </td>
  50.  
    </tr>
  51.  
    </tbody>
  52.  
    </table>
  53.  
     
  54.  
    <script>
  55.  
    var cbAll = document.getElementById("cbAll");
  56.  
    var tbs = document.getElementById("tb").getElementsByTagName("input");
  57.  
    cbAll.onclick=function(){
  58.  
    console.log(cbAll.checked);
  59.  
    for(var i = 0;i < tbs.length;i ){
  60.  
    tbs[i].checked=cbAll.checked;
  61.  
    }
  62.  
    }
  63.  
     
  64.  
    for (var i = 0;i < tbs.length;i ){
  65.  
    tbs[i].onclick=function(){
  66.  
    var flag=true;
  67.  
    for (var i = 0;i < tbs.length;i ){
  68.  
    if(!tbs[i].checked){
  69.  
    flag = false;
  70.  
    }
  71.  
    }
  72.  
    cbAll.checked=flag;
  73.  
    }
  74.  
    }
  75.  
     
  76.  
    </script>
  77.  
     
  78.  
    </body>
  79.  
    </html>
学新通

也可以不改顺序，通过设置window.onload 来运行。设置window.onload 的作用是：使js代码在确保页面加载完成后再进行

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>全选</title>
  6.  
     
  7.  
    <script>
  8.  
    window.onload=function(){
  9.  
    var cbAll = document.getElementById("cbAll");
  10.  
    var tbs = document.getElementById("tb").getElementsByTagName("input");
  11.  
    cbAll.onclick=function(){
  12.  
    console.log(cbAll.checked);
  13.  
    for(var i = 0;i < tbs.length;i ){
  14.  
    tbs[i].checked=cbAll.checked;
  15.  
    }
  16.  
    }
  17.  
     
  18.  
    for (var i = 0;i < tbs.length;i ){
  19.  
    tbs[i].onclick=function(){
  20.  
    var flag=true;
  21.  
    for (var i = 0;i < tbs.length;i ){
  22.  
    if(!tbs[i].checked){
  23.  
    flag = false;
  24.  
    }
  25.  
    }
  26.  
    cbAll.checked=flag;
  27.  
    }
  28.  
    }
  29.  
    }
  30.  
    </script>
  31.  
    </head>
  32.  
    <body>
  33.  
    <table class="box">
  34.  
    <thead>
  35.  
    <tr>
  36.  
    <th><input type="checkbox" id="cbAll" ></th>
  37.  
    <th>价格</th>
  38.  
    <th>商品</th>
  39.  
    </tr>
  40.  
    </thead>
  41.  
    <tbody id="tb">
  42.  
    <tr>
  43.  
    <td>
  44.  
    <input type="checkbox">
  45.  
    </td>
  46.  
    <td>
  47.  
    30
  48.  
    </td>
  49.  
    <td>
  50.  
    荔枝
  51.  
    </td>
  52.  
    </tr>
  53.  
    <tr>
  54.  
    <td>
  55.  
    <input type="checkbox">
  56.  
    </td>
  57.  
    <td>
  58.  
    29
  59.  
    </td>
  60.  
    <td>
  61.  
    哈密瓜
  62.  
    </td>
  63.  
    </tr>
  64.  
    <tr>
  65.  
    <td>
  66.  
    <input type="checkbox">
  67.  
    </td>
  68.  
    <td>
  69.  
    28
  70.  
    </td>
  71.  
    <td>
  72.  
    苹果
  73.  
    </td>
  74.  
    </tr>
  75.  
    </tbody>
  76.  
    </table>
  77.  
    </body>
  78.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhhkikgb
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群