报错Cannot set properties of null (setting 'onchange')求最优解决方案

核心问题分析 #

• ID不匹配：JS代码里用document.getElementById("file")查找元素，但HTML中input的实际ID是post-input，这直接导致uploadField变量为null，无法设置onchange事件。
• HTML语法错误：input标签重复写了id属性（<input id ="post-input" id type="file"...>），属于无效语法，浏览器只会解析第一个ID，虽不是本次错误的直接原因，但需修正。

修正后的代码 #

JS代码

var uploadField = document.getElementById("post-input");

console.log(uploadField);

uploadField.onchange = function() {
    console.log("new")
    if(this.files[0].size > 2200000){
            alert("File is too big!");
            this.value = "";
    };
};

HTML代码

<input id="post-input" type="file" placeholder="Foto do Cartaz" name="image" accept=".png,.jpeg,.jpg,.gif" class="file-input" style="color: black;"/>

额外优化建议 #

为避免DOM未加载完成就执行JS导致的null问题，建议把JS代码放在HTML的</body>标签之前，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    var uploadField = document.getElementById("post-input");
    uploadField.onchange = function() {
        console.log("new")
        if(this.files[0].size > 2200000){
                alert("File is too big!");
                this.value = "";
        };
    };
});

内容的提问来源于stack exchange，提问作者João Branco