JavaScript 关注/取消关注按钮答案

【问题标题】：JavaScript Follow / Unfollow ButtonJavaScript 关注/取消关注按钮
【发布时间】：2021-01-03 09:02:47
【问题描述】：

我想做一个简单的 JavaScript 程序，让你喜欢和不喜欢。所以实际上我是 JavaScript 的新手，这对我来说有点困难。因此，当您单击“关注”按钮时，它会将“countF”变量的数量增加 1，并将按钮文本更改为“取消关注”。所以正如我所说，这是一个基本程序。所以我不知道如何反过来做。我的意思是当“取消关注”按钮单击时，“countF”应该减少 1，并且按钮文本应该变回“关注”。是的，我也知道这很简单，但不知何故我做不到。任何帮助或想法如何完成这个？

var countF = 0;
var btnText = "Unfollow";
var countButton = document.getElementById("followButton");
var displayCount = document.getElementById("followers");
countButton.onclick = function() {
countF++;
followers.innerHTML = countF;
var countButton = document.getElementById("followButton");
countButton.innerHTML = btnText;
if(countButton.innerHTML = btnText) {
countF--;
countButton.innerHTML = "Follow";
}
}

<div id="followers">0</div>
<button id="followButton"></button>

【问题讨论】：

这个值是只有1还是可以大于1？
应该大于1。
也许做两个按钮会更合乎逻辑？ - Follow 和 Unfollow
是的，但我想一键完成。
如果你的值大于1，那么你将无法一键完成

标签： javascript html css arrays linux

【解决方案1】：

观看此视频，了解有关投票系统的精彩教程。 https://www.youtube.com/watch?v=mBPURBO1kD8 每当您进行投票时，您需要处理的不仅仅是客户端。

话虽如此，也许这个概念会有所帮助：

let likedPost = false

function toggleVote() {
    likedPost ? removeUpvote() : addUpvote()
    likedPost = !likedPost
}

function removeUpvote() {
    //code for removing
    //probably should be a few calls to a server
}
function addUpvote() {
    //code for adding
    //probably should be a few calls to a server
}

【讨论】：

【解决方案2】：

这样的事情会起作用：

var countF = 0;
var countButton = document.getElementById("followButton");
var displayCount = document.getElementById("followers");
countButton.onclick = function() {
if (countButton.innerText == "Follow") {
    countF++;
    countButton.innerText = "Unfollow";
  } else if (countButton.innerText == "Unfollow") {
    countF--;
    countButton.innerText = "Follow";
  }
  followers.innerHTML = countF;
}

并在按钮上添加文本：

<button id="followButton">Follow</button>

【讨论】：

但是在这种情况下，该值永远不会大于1。