在 DIV 外部单击时重置评级答案

【问题标题】：Reset rating when clicking outside of the DIV在 DIV 外部单击时重置评级
【发布时间】：2020-09-22 20:21:59
【问题描述】：

我正在做一个评级练习，如果我单击包含符号的 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");
});

提前谢谢你，希望你能帮助我！ :)

【问题讨论】：

这可能对Detect click outside div using javascript有帮助

标签： javascript html jquery css rating

【解决方案1】：

检查这个：

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>

【讨论】：

解决了！谢谢你:)
快乐编码:)

【解决方案2】：

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

box.classList.add(".rating>label");

没有给你“评级”类，它试图添加不存在的名为“.rating>label”的东西。

 box.classList.add("rating");

可能是你试图做的。

对于错误本身，请查看：TypeError: Cannot read property 'classList' of null

【讨论】：

【解决方案3】：

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

因此，您的 javascript 会在页面上的元素准备好使用之前执行。因此，document.querySelector(".box") 将返回 null，因此，您无法访问 null 的类列表。这就是错误消息告诉您的内容。

在这种简单的情况下，将 <script ...> 标签移动到正文的末尾就足够了，如下所示：

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

    <script src="javascript.js"></script>
</body>

【讨论】：