一段小代码运行时报错Uncaught TypeError: Cannot read property 'style' of null 。恳请大神解答

这一段小代码在运行时报错：Uncaught TypeError: Cannot read property 'style' of null。
代码如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">    
        <title>IFE ECMAScript</title>
        
    </head>
    <body>
        <div id="fade-obj" style="width:300px;height:300px;background:rgb(0, 0, 0, 1)"></div>
        <button id="fade-btn">淡出</button>
        <script>
            var button = document.getElementById("fade-btn");
            var obj = document.getElementById("fade-boj");
            var index = 0;
            var transParent;
            var intervalId;
            function fadeOut() {
                if (index === 1000) {
                    clearInterval(intervalId);
                }
                transParent = 1 - index / 1000;
                console.log("sssssss")
                console.log("style", obj.style);
                obj.style.background = "rgb(0, 0, 0," + " " + transParent + ")";
                index ++;
            }
            button.onclick = function() {
                
                if(button.firstChild.nodeValue === "淡出") {
                    button.disabled = true;
                    intervalId = setInterval(fadeOut, 10);
                }
            }
        </script>
    </body>
</html>
跪求大神解答！谢谢