Fatal编程技术网
  • javascript/
  • Javascript 单击DIV外部时重置评级

Javascript 单击DIV外部时重置评级

javascript html jquery css

Javascript 单击DIV外部时重置评级,javascript,html,jquery,css,rating,Javascript,Html,Jquery,Css,Rating,我正在进行评级练习，如果我单击包含符号的DIV之外的任何位置，我必须能够重置我的选择，但由于任何原因，我无法找到正确的解决方案 现在，每次执行代码时，我都会在javascript代码的第17行中收到消息“uncaughttypeerror:cannotreadproperty'classList'of null”。有人知道我做错了什么吗？我已经想不到了。 我将代码复制到下面： HTML JAVASCRIPT var box = document.querySelector(".

我正在进行评级练习，如果我单击包含符号的DIV之外的任何位置，我必须能够重置我的选择，但由于任何原因，我无法找到正确的解决方案

现在，每次执行代码时，我都会在javascript代码的第17行中收到消息“uncaughttypeerror:cannotreadproperty'classList'of null”。有人知道我做错了什么吗？我已经想不到了。 我将代码复制到下面：

HTML

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”，它尝试添加名为“.rating”>“label”的内容，但该内容不存在

 box.classList.add("rating");
可能是你想做的

对于错误本身，请检查以下内容：

我注意到的第一件事是，您没有添加前面带点的类名，不是：（.rating），而是（“rating”）。第二件事是“.rating>label”不是类名，而是带有选择器的类名。所以

box.classList.add(".rating>label");
未向您提供类“rating”，它尝试添加名为“.rating”>“label”的内容，但该内容不存在

 box.classList.add("rating");
可能是你想做的

对于错误本身，请检查以下内容：

浏览器将从上到下“处理”您的代码

因此，javascript在页面上的元素准备好使用之前执行。 由于
document.querySelector（“.box”）
将返回
null
，因此， 无法访问null的类列表。这就是错误消息告诉您的

在这种简单的情况下，将
标记移动到包含javascript的正文末尾就足够了，如下所示：

<body>
    <!-- all the stuff on your page //-->

    <script src="javascript.js"></script>
</body>
浏览器将从上到下“浏览”您的代码

因此，javascript在页面上的元素准备好使用之前执行。 由于
document.querySelector（“.box”）
将返回
null
，因此， 无法访问null的类列表。这就是错误消息告诉您的

在这种简单的情况下，将
标记移动到包含javascript的正文末尾就足够了，如下所示：

<body>
    <!-- all the stuff on your page //-->

    <script src="javascript.js"></script>
</body>
检查此项：

var radios=document.querySelectorAll（'input[name=rating]'）；
document.addEventListener（“单击”），函数（事件）{
var targ=event.target.parentElement；
如果（！（target&&target.classList.contains（'rating'））{
收音机.forEach（e=>{
如果（e.checked）{
e、 选中=错误；
}
});
}
});

.rating{
边界：无；
浮动：左；
文本对齐：居中；
}
.评级>输入{
显示：无；
}
.评级>标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f118”；
}
.评级>标签{
颜色：#ddd；
浮动：对；
}
.评级>输入：选中~标签，
.额定值：未（：选中）>标签：悬停，
.额定值：未（：选中）>标签：悬停~标签{
颜色：#FFD700；
}
.评级>输入：选中+标签：悬停，
.评级>输入：选中~标签：悬停，
.评级>标签：悬停~输入：选中~标签，
.评级>输入：选中~标签：悬停~标签{
颜色：#FFED85；
}




检查此项：



var radios=document.querySelectorAll（'input[name=rating]'）；
document.addEventListener（“单击”），函数（事件）{
var targ=event.target.parentElement；
如果（！（target&&target.classList.contains（'rating'））{
收音机.forEach（e=>{
如果（e.checked）{
e、 选中=错误；
}
});
}
});

.rating{
边界：无；
浮动：左；
文本对齐：居中；
}
.评级>输入{
显示：无；
}
.评级>标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f118”；
}
.评级>标签{
颜色：#ddd；
浮动：对；
}
.评级>输入：选中~标签，
.额定值：未（：选中）>标签：悬停，
.额定值：未（：选中）>标签：悬停~标签{
颜色：#FFD700；
}
.评级>输入：选中+标签：悬停，
.评级>输入：选中~标签：悬停，
.评级>标签：悬停~输入：选中~标签，
.评级>输入：选中~标签：悬停~标签{
颜色：#FFED85；
}




这可能有帮助这可能有助于解决问题！谢谢：）快乐编码：）解决了！谢谢：）快乐编码：）