javascript - 未捕获的类型错误 : Cannot read property 'classList' of null

标签 javascript

我正在开发一个简单的网络应用程序,但收到上述错误。你们能帮我一下吗?

应用程序.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>

当我运行索引页时,出现以下错误:Uncaught TypeError: Cannot read property 'classList' of null。

感谢您的帮助。

最佳答案

在此部分中,this 等同于 movieApp.section

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

因此 this.toggle() 正在调用 movieApp.section.toggle(),然后不向该函数传递参数。

如果您想在“关于”部分设置默认事件类,您需要对您的函数执行此操作:

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();
    },
};

关于javascript - 未捕获的类型错误 : Cannot read property 'classList' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26115976/

相关文章:

javascript - 无法对 Angular 示例项目运行测试

javascript - Canvas 高度和宽度

javascript - 使用鼠标拖动来控制背景位置

javascript - 向 bison/jison 计算器语言添加函数

javascript - 在另一个模型中引用/填充 Mongoose 模型时出现问题

JavaScript:动态创建数组

javascript - 正则表达式检测连续重复的数字

javascript - jQuery:使用 setTimeout 时函数未执行两次

javascript - V8 中的数组方法是用 C++、Torque 编写的,还是 JS 在运行时转换为机器码?

javascript - Raphael 元素上的鼠标滚轮事件