ttthumbsviewcontroller - 点赞和点赞，本地保存，并在新用户点击时继续计数

Question

我需要帮助创建一个竖起大拇指的按钮。我的挑战是： 1：两个拇指都不算，而是一个 2. 单词“Bad”和计数器之间没有空格。3. 如果有人在访问该站点时点击它，我希望它继续计数。这是笔的链接：https ://codepen.io/abdulhaldu/pen/RwWpKGV

<button onclick="clickCounter()" type="button" class="btn btn-success"><i class="fa fa-thumbs-up"></i><span class="vl"></span><div id="result"></div></button> <button onclick="clickCounter()" type="button" class="btn btn-danger"><i class="fa fa-thumbs-down"></i><span class="vl"></span> <div id="secondresult"</div></button>

非常感谢

Answer 1

我用 2 个函数做了 1 个函数，接受喜欢或不喜欢的变量。

<button onclick="clickCounter('like')" type="button" class="btn btn-success">
  <i class="fa fa-thumbs-up"></i>
  <span class="vl"></span>
  <div id="like-count"></div>
</button>

<button onclick="clickCounter('dislike')" type="button" class="btn btn-danger">
  <i class="fa fa-thumbs-down"></i>
  <span class="vl"></span>
  <div id="dislike-count"></div>
</button>

function clickCounter(reaction) {
  const id = reaction === 'like' ? 'like-count' : 'dislike-count';
  
  if (typeof Storage === "undefined") {
    document.getElementById(id).innerHTML =
      "Sorry, your browser does not support web storage...";
  }
  
  localStorage[reaction] = localStorage[reaction] ? +localStorage.[reaction] + 1 : 1;
  const reactionName = reaction === 'like' ? 'good' : 'bad';
  document.getElementById(id).innerHTML = reactionName + ' ' + localStorage[reaction] + " time(s).";
}

密码笔