[英]Reset rating when clicking outside of the DIV
我正在做一個評級練習,如果我在包含符號的 DIV 之外的任何地方單擊,我必須能夠重置我的選擇,但由於任何原因我無法找到正確的解決方案。
到目前為止,每次執行代碼時,我都會在 javascript 代碼的第 17 行收到消息“Uncaught TypeError: Cannot read property 'classList' of null”。 有誰知道我做錯了什么? 我已經超出想象了。 我在下面復制我的代碼:
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");
沒有給你 class “評級”,它試圖添加不存在的名為“.rating>label”的東西。
box.classList.add("rating");
可能是你試圖做的。
對於錯誤本身,檢查一下: TypeError: Cannot read property 'classList' of null
瀏覽器將從上到下“遍歷”您的代碼。
因此,您的 javascript 在頁面上的元素准備好使用之前執行。 由於document.querySelector(".box")
將返回null
,因此,您無法訪問 null 的 class 列表。這就是錯誤消息告訴您的內容。
在這個簡單的例子中,移動<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.