使用Promise开发时onclick触发Cannot set property 'onclick' of null报错如何解决

核心报错根因 #

你代码触发Cannot set property 'onclick' of null的直接原因是：

• 你调用document.getElementById('submit')尝试获取提交按钮，但HTML里的提交按钮没有设置id="submit"属性，DOM查询返回null，给null绑定点击事件自然抛出类型错误。

其余隐藏逻辑问题 #

除了上述报错，你的代码还存在多处逻辑错误，会导致后续功能无法正常运行：

1. 提交按钮是type="submit"，点击后会默认触发表单提交刷新页面，需要阻止默认行为
2. Promise加载图片的逻辑写在全局作用域，页面加载时就会直接执行，不是点击按钮之后才触发
3. 取宽高时获取的是input元素本身，不是用户输入的value值，拼接的图片URL会异常
4. 给img绑定load事件时直接写resolve(img)，会立刻执行resolve，不是等图片加载完成后才触发
5. 点击事件内部用let声明source变量，属于局部变量，不会修改全局的source变量，拼接的URL无法传递给外部逻辑
6. form标签的action属性缺了等于号，属于语法小瑕疵

修复后完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Wanna See A Picture?</title>
    </head>
    <body>
        <div class="container">
            <!-- 修复action属性缺等于号的问题 -->
            <form action="/setup" method="post" id="setup">
                <h1>Enter your random image size</h1>
                <p>Enter an image width and height by entering a number between 200 and 1200 in each field.</p>
                <p>Click "Get Your Pic!" when ready.</p>
                <div class="field">
                    <label for="width">Enter a width:</label>
                    <input type="number" id="width" name="width" />              
                </div>
                
                <div class="field">
                    <label for="height">Enter a height:</label>
                    <input type="number" id="height" name="height" />
                </div>
                
                <div class="field">
                    <!-- 给按钮添加id="submit" -->
                    <button type="submit" id="submit">Get Your Pic!</button>
                </div>
                
            </form>
        </div>
        
        <div id="imgOutput"></div>
        
        <script>
            const SUBMITBTN = document.getElementById('submit');
            
            // 把整个逻辑挪到点击事件内部，点击后才执行
            SUBMITBTN.onclick = function(e){
                // 阻止表单提交默认刷新行为
                e.preventDefault();
                // 取输入框的value值
                let imgWidth = document.getElementById('width').value;
                let imgHeight = document.getElementById('height').value;
                let source = `https://picsum.photos/${imgWidth}/${imgHeight}/?random`;
                
                let img = new Image();
                let imgPromise = new Promise(function(resolve, reject){
                    // 把resolve包在函数里，等load触发再执行
                    img.addEventListener('load', () => resolve(img));
                    img.addEventListener('error', () => reject('Could not load image'));
                    img.src = source;
                });
                
                imgPromise.then(function(fromResolve){
                    let node = document.getElementById('imgOutput');
                    // 加载成功前先清空之前的内容
                    node.innerHTML = '';
                    node.appendChild(img);
                }).catch(function(fromReject){
                    document.getElementById('imgOutput').innerHTML = fromReject
                });
            }
        </script>
    </body>
</html>

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