JavaScript increase or decrease number by clicking-CodePudding

This my Html code:

<li>
<a href="#" >
<span >
<i ></i>
<i > </i>
<span >0</span>Like</span>
</a>
</li>

I didn't write css code

  $(".fa.fa-heart.like").css("display", "none");

If the user clicks on the letter or the heart, the zero should become one. If the user clicks on the text or the heart again, the one should become zero. How can I do that? I tried this but it didn't work.

This is my JS:

$(".fa.fa-heart.like").css("display", "none");

var like = parseInt($(".point").text())   1;
var flag = true;
var timeline1 = gsap.timeline({ repeatDelay: 0.1, paused: true });
timeline1.to(".likelink", { duration: 0.7, width: 50, ease: Back.easeIn })
    .to(".point", { duration: 0.2, opacity: 0, fontSize: 0 }, "-=0.7")//sayı
    .to(".fa.fa-heart-o.like", { duration: 0.4, display: "none" }, "-=0.5")//kalp
    .to(".fa.fa-heart.like", { duration: 0.1, display: "inline-block" }, "-=0.1")
    .to(".likelink", { duration: 0.7, width: 170 });

$(".likelink").click(function () {
    event.stopPropagation();
    flag ? timeline1.play() : timeline1.progress(0).pause();
    flag = !flag;
});

CodePudding user response：

You already have some code which gets the current number of likes: var like = parseInt($(".point").text()) 1;

However, you're not currently doing anything with the like variable. You need to update the HTML with the updated value. You can do this by passing the like value into the same jQuery text method you're using to get the variable: $(".point").text(like);

You will want to do this within the click handler (i.e. the function which runs when the user clicks an element with the likelink class). However, at the moment you only ever change it once. You want to change it every time the element is clicked, so you need the code to be within that click handler.

You also want to track whether or not the user has already clicked the element. You have a flag variable which I assume you intend to use for this purpose, but you're not updating its value within the click handler. You need to negate it each time the user clicks. The current value of the flag should determine whether you add or subtract 1 to the like variable.

I've simplified your code to focus on the core problem, and added code in the click handler to update flag and display the new value of like.

$(".fa.fa-heart.like").css("display", "none");

var flag = false;
$(".likelink").click(function() {
  event.stopPropagation();

  flag = !flag;
  var like = parseInt($(".point").text());
  if (flag) {
    like  = 1;
  } else {
    like -= 1;
  }
  $(".point").text(like);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <a href="#" >
    <span >
      <i ></i>
      <i > </i>
      <span >0</span>Like
    </span>
  </a>
</li>