开发者社区> 问答> 正文

为什么javascript代码无法读取到函数类型( Uncaught TypeError)?

绑定了一个事件addEventListener,但是调试的时候报错,显示Uncaught TypeError: Cannot read property 'addEventListener' of null,类型错误。不知道错在哪里,也不知道如何定位。
报错的是如下代码段:

function init() {

// 在这下面给add-btn绑定一个点击事件,点击时触发addBtnHandle函数
document.getElementById("add-btn").addEventListener("click", addBtnHandle)
// 想办法给aqi-table中的所有删除按钮绑定事件,触发delBtnHandle函数
document.getElementById("aqi-table").addEventListener("click", function(event){
    if(event.target.nodeName.toLowerCase() === 'button') delBtnHandle.call(null, event.target.dataset.city);
})

}
全部的代码地址:http://louislee0229.github.io/louisIFE/task16/task16

展开
收起
a123456678 2016-03-11 16:33:54 2084 0
1 条回答
写回答
取消 提交回答
  • 你的这段代码在head中定义并立即执行,也就是下面body的元素都还没有生成,所以document.getElementById("add-btn")返回的都是null。

    解决问题你需要,

    要不把script放在body末尾
    要不把把执行放在onload事件中
    以后如何解决自己独立调试:
    看懂报错信息,这里明显的告诉你了调用addEventListener的对象为null,那么肯定就是两个getElementById找不到元素,然后去看为什么找不到。因为这里你是链式调用,所以为了找出中间是哪步出了错,你可以把代码段(如:document.getElementById("add-btn"))直接copy出来放在console中跑跑看结果。

    2019-07-17 18:59:34
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载