文章/答案/技术大牛

发布

社区首页 >问答首页 >未捕获TypeError:无法读取null的属性“”classList“”

问未捕获TypeError:无法读取null的属性“”classList“”
EN

Stack Overflow用户

提问于 2014-09-30 16:18:03

回答 1查看 37.3K关注 0票数 4

我正在开发一个简单的web应用程序，我收到了上面的错误。你们能帮我一下吗？

app.js：

var movieApp = movieApp || {};

(function () {
movieApp.controller = {
    init:function() {
        movieApp.router.init();
        movieApp.section.init();
    }
};

movieApp.router = {
    init:function() {
        routie({
            '/about': function() {
                movieApp.section.toggle('section[data-route="about"]');
            },              
            '/movies': function() {
                movieApp.section.toggle('section[data-route="movies"]');
            },
            ' ': function() {
                movieApp.section.toggle('section[data-route="about"]');
            },  
        });
    }
};

movieApp.content = {
    about: {
        title: "About this app",
        description: "...",
    },

    movies: [
        {
            title: "Shawshank Redemption",
            releaseDate: "14 October 1994",
            description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
            cover: "../WebApp/static/images/shawshank-redemption.jpg"
        },
        {
            title: "The Godfather",
            releaseDate:"24 March 1972",
            description:"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
            cover: "../WebApp/static/images/the-godfather.jpg"
        },
        {
            title: "Pulp Fiction",
            releaseDate: "14 October 1994",
            description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
            cover: "../WebApp/static/images/pulp-fiction.jpg"
        },
        {
            title: "The Dark Knight",
            releaseDate: "18 July 2008",
            description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.",
            cover: "../WebApp/static/images/the-dark-knight.jpg"
        }
    ]
};

movieApp.section = {
    init:function() {
        this.about();
        this.movies();
    },

    about:function() {
        var aboutSection = {
            'title': movieApp.content.about.title,
            'description': movieApp.content.about.description
        };

        Transparency.render(document.querySelector('section[data-route="about"]'),aboutSection);
    },

    movies:function() {
        var moviesSection = {
            'header': "Favorite Movies",
            'movies': movieApp.content.movies
        }

        // dit zorgt ervoor dat de src van img tag veranderd naar wat er staat in this.cover
        var directives = {
            movies: {
                cover: {
                    src: function(params){
                        return this.cover
                    }
                }
            }
        }

        Transparency.render(document.querySelector('section[data-route="movies"]'),moviesSection, directives);
    },

    toggle:function(section) {
        section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
        document.querySelector(section).classList.toggle('active');
    }
};

movieApp.controller.init();

})();

html文件如下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Movies Web App</title>
    <link rel="stylesheet" href="static/stylesheets/main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#/about">About</a></li>
                <li><a href="#/movies">Movies</a></li>
            </ul>
        </nav>
    </header>

    <main id="content">

        <section data-route="about">
            <header>
                <h1 data-bind="title"></h1>
                <p data-bind="description"></p>
            </header>
        </section>

        <section data-route="movies">
            <h1 data-bind="header"></h1>    
            <div data-bind="movies">
                <article data-bind="movie">
                    <header>
                        <h1 data-bind="title"></h1>
                        <em><time data-bind="releaseDate"></time></em>
                    </header>
                    <figure>
                        <img data-bind="cover" src="" alt="">
                    </figure>
                    <p data-bind="description"></p>
                </article>
            </div>
        </section>
    </main>

    <script src="static/js/lib/routie.js"></script>
    <script src="static/js/lib/transparency.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>

当我运行索引页时，我得到以下错误:未捕获TypeError:无法读取null的属性'classList‘。

谢谢你的帮助。

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-30 16:38:05

在本节中，this等同于movieApp.section。

movieApp.section = {
    init:function() {
        this.about();
        this.movies();
        this.toggle();
    },
};

因此，this.toggle()调用movieApp.section.toggle()，因此不会将参数传递给该函数。

如果你想在'about‘部分设置一个默认的活动类，你需要对你的函数执行这个操作：

toggle:function(section) {
    section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
    document.querySelector(section).classList.toggle('active');
}

更新

根据注释，您可以从此处删除toggle行：

movieApp.section = {
    init:function() {
        this.about();
        this.movies();
    },
};

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26115976

复制

相似问题

问未捕获TypeError:无法读取null的属性“”classList“”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获TypeError:无法读取null的属性“”classList“”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获TypeError:无法读取null的属性“”classList“”
EN