我尝试对页面进行简单的“喜欢/不喜欢”功能。图像更改正在运行，但计数器无法运行，我也不知道为什么。任何想法如何使其可行？顺便说一句，我读了很多关于使用JS的喜欢/不喜欢系统的问题，但是它对我来说并不是真的。
const imageChange = document.querySelector('.likeClassQ')
var countL = 0;
var buttonLike = document.getElementById("likeButton");
var displayLike = document.getElementById("likes");
buttonLike.addEventListener('click', () => {
imageChange.classList.toggle('likeClassFilled')
})
buttonLike.onclick = function() {
if (buttonLike.classList == 'likeClass') {
countL++;
buttonLike.classList.add = "likeClassFilled";
} else if (buttonLike.classList == "likeClassFilled") {
countL--;
buttonLike.classList.add = "likeClass";
}
displayLike.innerHTML = countL;
}.likeClass {
background-color: red;
background-repeat: no-repeat;
background-size: contain;
padding: 10px;
border: none;
}
.likeClassFilled {
background-color: green;
}<span><span id="likes">0</span> Likes</span><br>
<button id="likeButton" class="likeClass likeClassQ">Like</button>无需将功能分配给onclick和使用addEventListener。只需使用一个并坚持下去。
您的CSS类到处都是。将一种用于一般样式，另一种用于您的状态。更好的是，data如果元素或什至是风格化的复选框，请使用属性。将CSS类和业务逻辑混合在一起很容易。
classList具有toggle，add和这样的方法includes，但是您必须将这些字段用作方法而不是简单字段。同样，您不能对==对象使用比较运算符（）。您只能将其用于简单的值，例如字符串或数字。您可以通过在方法/函数名称后加方括号并在其中传递任何参数来执行函数/方法。使用赋值运算符（=）时，您不会调用任何东西。
您保存状态并导出当前状态的逻辑存在缺陷。我将其更改为在每次单击时切换一个班级。因此，您将找不到在条件内添加或删除的任何类。
const imageChange = document.querySelector('.likeClassQ')
var countL = 0;
var buttonLike = document.getElementById("likeButton");
var displayLike = document.getElementById("likes");
buttonLike.onclick = function() {
if (buttonLike.classList.contains('likeClassFilled')) {
countL--;
} else {
countL++;
}
buttonLike.classList.toggle("likeClassFilled");
displayLike.innerHTML = countL;
}.likeClass {
background-color: red;
background-repeat: no-repeat;
background-size: contain;
padding: 10px;
border: none;
}
.likeClassFilled {
background-color: green;
}<span><span id="likes">0</span> Likes</span><br>
<button id="likeButton" class="likeClass likeClassQ">Like</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句