JavaScript onclick 改变图片并增加计数器答案

【问题标题】：JavaScript onclick change image and increase the counterJavaScript onclick 改变图片并增加计数器
【发布时间】：2021-01-03 10:10:21
【问题描述】：

我尝试为我的页面创建一个简单的喜欢/不喜欢功能。图像更改有效，但计数器无效，我不知道为什么。知道如何使它可行吗？顺便说一句，我已经阅读了一堆关于 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>

【问题讨论】：

您可以将所有逻辑放入第一个addEventListener，而不是使用onclick 定义第二个侦听器。另外，要检查元素是否有你需要使用的类 classList.contains 所以将 buttonLike.classList == 'likeClass' 更改为 buttonLike.classList.contains('likeClass')
谢谢，这是个好主意，而且也有效。我的意思是它的一部分有效。现在，当您单击按钮时，图像会发生变化并且计数器会增加，但第二次单击计数器会再次增加而不是减少。

标签： javascript html css arrays button

【解决方案1】：

无需将函数分配给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>

【讨论】：