我正在做一个评级练习，如果我单击包含符号的div之外的任何位置，我必须能够重置我的选择，但由于任何原因，我都无法找到正确的解决方案。
到目前为止，每次我执行代码时，我都会收到消息"；未捕获的类型错误：无法读取null的属性"classList"；在我的javascript代码的第17行。有人知道我做错了什么吗？我已经超出了想象。我在下面复制我的代码：
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>cosanueva</title>
<meta name="description" content="">
<meta name="viewport" content="width=1024, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="estilos.css">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div class="container box">
<div class="col-12 rating">
<input type="radio" id="smile5" name="rating" value="5" /><label class="full" for="smile5"></label>
<input type="radio" id="smile4" name="rating" value="4" /><label class="full" for="smile4"></label>
<input type="radio" id="smile3" name="rating" value="3" /><label class="full" for="smile3"></label>
<input type="radio" id="smile2" name="rating" value="2" /><label class="full" for="smile2"></label>
<input type="radio" id="smile1" name="rating" value="1" /><label class="full" for="smile1"></label>
</div>
</div>
</body>
</html>
CSS
/****** Style Smile Rating Widget *****/
.rating {
border: none;
float: left;
text-align: center;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "f118";
}
.rating>label {
color: #ddd;
float: right;
}
/***** CSS Magic to Highlight Smile on Hover *****/
.rating>input:checked~label,
/* show gold smile when clicked */
.rating:not(:checked)>label:hover,
/* hover current smile */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous smile in list */
.rating>input:checked+label:hover,
/* hover current smile when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
JAVASCRIPT
var box = document.querySelector(".box");
// Detect all clicks on the document
document.addEventListener("click", function(event) {
// If user clicks inside the element, do nothing
if (event.target.closest(".box")) return;
// If user clicks outside the element,
box.classList.add(".rating>label");
});
提前谢谢你，希望你能帮助我！：(
检查这个：
var radios = document.querySelectorAll('input[name=rating]');
document.addEventListener("click", function(event) {
var targ = event.target.parentElement;
if (!(targ && targ.classList.contains('rating'))) {
radios.forEach(e => {
if (e.checked) {
e.checked = false;
}
});
}
});.rating {
border: none;
float: left;
text-align: center;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "f118";
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
.rating>input:checked+label:hover,
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
.rating>input:checked~label:hover~label {
color: #FFED85;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="container box">
<div class="col-12 rating">
<input type="radio" id="smile5" name="rating" value="5" /><label class="full" for="smile5"></label>
<input type="radio" id="smile4" name="rating" value="4" /><label class="full" for="smile4"></label>
<input type="radio" id="smile3" name="rating" value="3" /><label class="full" for="smile3"></label>
<input type="radio" id="smile2" name="rating" value="2" /><label class="full" for="smile2"></label>
<input type="radio" id="smile1" name="rating" value="1" /><label class="full" for="smile1"></label>
</div>
</div>我注意到的第一件事是，您不添加前面有点的classNames，而不是：(quot；.trating"(，而是(quot(rating。第二件事是"。评级>标签"；不是类名，而是带有选择器的类名。所以
box.classList.add(".rating>label");
不是给你上课；评级"；它试图添加名为"的东西；。评级>标签"；这是不存在的。
box.classList.add("rating");
可能就是你想做的。
对于错误本身，请检查以下内容：TypeError:无法读取属性'；classList'；空的
浏览器将"通过"；您的代码从上到下。
正因为如此，您的javascript在页面上的元素准备好使用之前就被执行了。由于CCD_ 1将返回CCD_，您无法访问null的类列表。这就是错误消息告诉您的内容。
在这种简单的情况下，应该可以将<script ...>标记移动到正文的末尾，包括javascript，如下所示：
<body>
<!-- all the stuff on your page //-->
<script src="javascript.js"></script>
</body>