에러가 나요~index.html:143 Uncaught TypeE... - 인프런

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            overflow-x: hidden;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        section.title_wrap{
            position:fixed;
            height:800px;
            width:100%;
            top:0;
            left:0;
        }
        .coverImg{
            position:absolute;
            width:100%;
            height:100%;
            background: url(img/back.jpg) center center/cover no-repeat;
          

        }
        .cover {
            position:absolute;
            width:100%;
            height:100%;
            background-color:rgba(0, 0, 0, 0.123);

        }
        h1 {
            position:absolute;
            color:#eee;
            text-align:center;
            padding-top:320px;
            font-size:50px;
            width:100%;
        }
        section.textwrap{
            position:relative;
            width:100%;
            margin-top:800px;
            background-color:#fff;
            padding:100px;
        }
        p {
            color:#111;
            font-size:15px;
            margin-bottom:80px;
            line-height: 1.9;
        }
    </style>
</head>

<body>
    <section class="title_wrap">
        <div class="coverImg"></div>
        <div class="cover"></div>
        <h1>title</h1>
    </section>
    <section class="textwrap">
        <div class="inner_wrap">
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
                possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
                consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
                corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
                incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
                itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
                impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
                sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
                accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
                Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
                maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
                perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
                nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
                neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
                earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
                modi molestias itaque autem.
            </p>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
                possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
                consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
                corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
                incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
                itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
                impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
                sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
                accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
                Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
                maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
                perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
                nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
                neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
                earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
                modi molestias itaque autem.
            </p>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores
                possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo
                consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius
                corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto
                incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente
                itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores
                impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut
                sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde
                accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est?
                Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum
                maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit,
                perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab
                nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab
                neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt
                earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia,
                modi molestias itaque autem.
            </p>
        </div>
    </section>

    <script>
        let scrollTop =0;
        let coverImg;
        let cover;

        window.onload = function(){
            coverImg = document.getElementsByClassName('coverImg')[0];
            cover = document.getElementsByClassName('cover')[0];
            cover.style.opacity= .3;
        }

        window.addEventListener("scroll",function(e){
            scrollTop = document.documentElement.scrollTop;

            coverImg.style.backgroundPosition = "center top";
       
        })
    </script>
</body>

</html>
인프런 커뮤니티 질문&답변

에러가 나요~index.html:143 Uncaught TypeError: Cannot read property 'style' of undefined
