问题描述
我正在做一个评分练习,如果我单击包含符号的DIV之外的任何地方,必须重新设置选择,但是由于任何原因,我都找不到正确的解决方案。
现在,每次执行代码时,我的JavaScript代码的第17行都会收到消息“未捕获的TypeError:无法读取null的属性'classList'”。有人知道我在做什么错吗?我已经超乎想象了。 我在下面复制我的代码:
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");
});
提前谢谢您,希望对我有所帮助! :)
解决方法
我注意到的第一件事是,您不要在类名前面加上点而不是:(“。rating”)而不是(“ rating”)。第二件事是“ .rating> label”不是类名,而是带有选择器的类名。所以
box.classList.add(".rating>label");
没有为您提供“评级”类,而是试图添加不存在的名为“ .rating> label”的东西。
box.classList.add("rating");
可能是您尝试做的。
有关错误本身,请检查以下内容:TypeError: Cannot read property 'classList' of null
,浏览器将从上至下“遍历”您的代码。
因此,在准备使用页面上的元素之前,将执行JavaScript。
因此,document.querySelector(".box")
将返回null
,因此,
您无法访问null的类列表。这就是错误消息告诉您的内容。
在这种简单的情况下,应将<script ...>
标签移动到包含JavaScript的主体末尾,这样就足够了:
<body>
<!-- all the stuff on your page //-->
<script src="javascript.js"></script>
</body>
,
选中此一项:
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>