Javascript 未捕获的类型错误：无法读取 null 的属性“classList”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26115976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'classList' of null
提问by Matt
I'm working on a simple web app and I receive the above error. Would you guys please lend me a hand?
我正在开发一个简单的网络应用程序，但收到上述错误。你们能帮我一把吗？
app.js:
应用程序.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();
})();
The html file looks like this:
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>
When I run the index page, I get the following error: Uncaught TypeError: Cannot read property 'classList' of null.
当我运行索引页时，我收到以下错误：未捕获的类型错误：无法读取 null 的属性“classList”。
Thanks for the help.
谢谢您的帮助。
采纳答案by RichieAHB
In this section thisis equivalent to movieApp.section.
在本节this中相当于movieApp.section。
movieApp.section = {
init:function() {
this.about();
this.movies();
this.toggle();
},
};
So this.toggle()is calling movieApp.section.toggle()and is then not passing a parameter to that function.
this.toggle()调用movieApp.section.toggle()也是如此，然后没有将参数传递给该函数。
If you wanted to set a default active class on the 'about' section you would need to do this to your function:
如果您想在“关于”部分设置默认活动类，您需要对您的函数执行以下操作：
toggle:function(section) {
section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
document.querySelector(section).classList.toggle('active');
}
UPDATE
更新
As per the comments you can just remove the toggleline from here:
根据评论，您可以toggle从此处删除该行：
movieApp.section = {
init:function() {
this.about();
this.movies();
},
};
