Cordova按钮点击事件报错：Cannot read property 'addEventListener' of null

这个错误的核心原因很明确：你代码里的btn变量是null——也就是说，document.getElementById("btn1")根本没找到对应的DOM元素，自然没法调用addEventListener方法。

为什么会找不到？大概率是你的代码在DOM还没加载完成时就执行了，或者你没遵循Cordova的最佳实践——所有DOM操作和Cordova API调用都要等deviceready事件触发后再进行。

给你两个靠谱的解决办法：

方法一：把DOM操作移到deviceready回调中（推荐） #

Cordova会在设备环境完全就绪、页面DOM也加载完毕后触发deviceready事件，这时候操作DOM是最安全的。修改你的代码如下：

var app = {
    initialize: function() {
        // 先监听deviceready事件
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        // 在这里获取按钮并绑定事件
        var btn = document.getElementById("btn1");
        btn.addEventListener('click', this.buttonController, false);
    },

    buttonController: function() {
        // 这里写你的点击逻辑，比如弹出消息
        navigator.notification.alert('按钮被点击啦！');
    }
};

app.initialize();

方法二：等待DOM加载完成后再执行代码 #

如果你不想依赖deviceready（但还是建议用上，因为后续调用Cordova API必须等这个事件），可以先监听DOMContentLoaded事件，确保页面元素都渲染好了再获取按钮：

var app = {
    initialize: function() {
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            var btn = document.getElementById("btn1");
            // 加个判断，避免找不到元素时再次报错
            if (btn) {
                btn.addEventListener('click', app.buttonController, false);
            } else {
                console.error("找不到id为btn1的按钮，请检查HTML代码！");
            }
        });
        
        // 别忘了监听deviceready，后续用Cordova API需要它
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        // 其他需要设备就绪的操作
    },

    buttonController: function() {
        navigator.notification.alert('按钮被点击啦！');
    }
};

app.initialize();

最后再检查下你的index.html：确保确实存在一个id为btn1的按钮，比如<button id="btn1">点击弹出消息</button>，注意id是区分大小写的，别把btn1写成Btn1或者其他拼写错误了。

内容的提问来源于stack exchange，提问作者Andy D