javascript - Cannot read property 'addEventListener' of null，可否帮忙看看哪错了？

问题描述

问 题

<form>

    <input type="text" name="txtTel1" id="txtTel2" maxlength="3">
    <input type="text" name="txtTel2" id="txtTel2" maxlength="4">
    <input type="text" name="txtTel3" id="txtTel3" maxlength="3">
</form>

<script>

var EventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
    },
    getEvent:function(event){
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    }
};
(function(){
    function tabForward(event){
        var event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(target.value.length==target.maxLength){
            var form=target.form;
            for(var i=0,len=form.elements.length;i<len;i++){
                if(form.elements[i]==target){
                    if(form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    var txtTel1=document.getElementById("txtTel1");
    var txtTel2=document.getElementById("txtTel2");
    var txtTel3=document.getElementById("txtTel3");
    EventUtil.addHandler(txtTel1,"keyup",tabForward);
    EventUtil.addHandler(txtTel2,"keyup",tabForward);
    EventUtil.addHandler(txtTel3,"keyup",tabForward);
})();

</script>

解决方案

<form>
    <input type="text" name="txtTel1" id="txtTel1" maxlength="3">
    <input type="text" name="txtTel2" id="txtTel2" maxlength="4">
    <input type="text" name="txtTel3" id="txtTel3" maxlength="3">
</form>

看清楚 第一个 input 的 id 应该是 txtTel1，获取不到dom，当然添加不了事件啦

这篇关于javascript - Cannot read property &#039;addEventListener&#039; of null，可否帮忙看看哪错了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！