zoukankan      html  css  js  c++  java
  • 网页开发中使用javascript语言时浏览器操作时弹出错误:Uncaught TypeError: Cannot set property 'onClick' of null。

      在Chrome浏览器下,遇到了这个错误提示:Uncaught TypeError: Cannot set property 'onClick' of null。

      先贴一下JS的代码:

    document.getElementById("#register button").onclick=function(){
        alert('222');
    }

      后来查了是因为我的JS文件引入的顺序比标签加载的早,so,把js文件的引入放到了body下,但是依然报错。多处查询后,解决办法如下:

      网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:

      一、通过window.onload来执行脚本代码。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。window.οnlοad=function(){},使用此种方式为window.onload事件绑定事件处理函数,这里绑定的是一个匿名函数,当然也可以绑定非匿名函数。

      二、可以使用addEventListener()attachEvent()为onload事件绑定事件处理函数,addEventListener()是当前标准的一种事件处理函数绑定方式,但是IE8和IE8以下的浏览器并不支持此方式(addEventListener("type",函数名,false))。

    这时用第一种方法就可以解决问题,如果要处理多个事件的绑定,要用第二种方法。

    //方法一:

    window.onload = function () {
        document.getElementById("register").onclick=function(){
            alert('222');
        }
    }

    //方法二:(支持各大浏览器)

    if(window.addEventListener){
        window.addEventListener("load",alert1,false);
        window.addEventListener("load",alert2,false);
    }
    else{
        window.attachEvent("onload",alert1);
        window.attachEvent("onload",alert2);
    }
    
    function alert1(){
        document.getElementById("register").onclick=function () {
            alert('测试1');
        };
    }
    
    function alert2(){
        document.getElementById("register").onclick=function () {
            alert('测试2);
        };
    }

    参考链接:

    1、Uncaught TypeError: Cannot set property 'onClick' of null。

    2、Uncaught TypeError: Cannot set property 'onclick' of null onclick not working

    3、Uncaught TypeError: Cannot set property 'onclick' of null解决办法

  • 相关阅读:
    [BZOJ3530][SDOI2014]数数
    [Luogu3121][USACO15FEB]审查Censoring
    [BZOJ1212][HNOI2004]L语言
    [Luogu3041][USACO12JAN]视频游戏的连击Video Game Combos
    AC自动机总结
    (三)LDAP 新增用户
    (二) LDAP 安装
    (一)LDAP 简介
    (十三)VMware Harbor 身份验证模式
    loj#2541. 「PKUWC2018」猎人杀
  • 原文地址:https://www.cnblogs.com/rainbow70626/p/13485543.html
Copyright © 2011-2022 走看看