为什么onclick函数会出错？

Question

我正在做一项要求我们使用 Promise 的作业，当我运行脚本时，我在第 37 行收到此错误：

未捕获类型错误：无法设置属性 'onclick' 为 null

我不明白为什么 onclick 会抛出这个错误，因为我以前使用过具有类似功能的按钮，但从未遇到过问题。代码如下：

<!DOCTYPE html>

<html>
    <head>
        <title>Wanna See A Picture?</title>
    </head>
    <body>
        <div class="container">
            <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">
                    <button type="submit">Get Your Pic!</button>
                </div>
                
            </form>
        </div>
        
        <div id="imgOutput"></div>
        
        <script>
            const SUBMITBTN = document.getElementById('submit');
            
            let source = "";
            
            SUBMITBTN.onclick = function(){
                let imgWidth = document.getElementById('width');
                let imgHeight = document.getElementById('height');
                let source = `https://picsum.photos/${imgWidth}/${imgHeight}/?random`; //for grayscale add ?grayscale at end of url
            }
            
            
            let img = null;
            let imgPromise = new Promise(function(resolve, reject){
            img = new Image();
            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.appendChild(img);
            }).catch(function(fromReject){
                document.getElementById('imgOutput').innerHTML = fromReject
            });
        
        </script>
    </body>
</html>

Answer 1

const SUBMITBTN = document.getElementById('submit')

返回 Null，因为您使用了 getElementById，并且没有为按钮分配 ID。尝试：

<button id="submit" type="submit">Get Your Pic!</button>

注：

如果有多个提交按钮，为按钮硬分配 ID 可能并不理想。可能会寻找更具描述性的名称并找到适合您需要的 query-selector。

为什么onclick函数会出错？

Why is there an error with onclick function?

javascript

onclick

button