Question

我的网站上有两个按钮。这是喜欢和不喜欢的按钮。我有一个柜台。当我单击按钮时，增加计数器。在目前情况下，我单击了赞按钮。我不能不喜欢，我是说我单击了不喜欢按钮，但是我的决定已经改变，我想单击喜欢按钮。我该怎么办？对不起，我的英语。

var button = document.getElementById("btn");
var buttonFlag = false;
button.addEventListener("click", onClick);

function onClick() {
  if (buttonFlag) return;
  console.log("Clicked");
  buttonFlag = true;
}

我希望按钮---当我单击不喜欢的计数器= -1时，我单击喜欢的计数器= +1

Answer 1

你在这里!!

var count = 0;

function dolikes(add) {
  if (add) {
    count++;
  } else {
    count--;
  }
  if (count >= 0) {
    document.getElementById('count').innerText = count;
  } else {
    count = 0;
  }
}

<button onclick="dolikes('add')">Like</button>

<div id="count">0</div>

<button onclick="dolikes()">Dislike</button>

Answer 2

const counterDisplay = document.getElementById("counter")

window.counter = 0

function Like() {
  counter += 1
  counterDisplay.innerText = counter
}

function Dislike() {
  if (counter > 0) counter -= 1
  counterDisplay.innerText = counter
}

<button onclick="Like()">Like</button>
<button onclick="Dislike()">Dislike</button>

<span id="counter">0</span>

Answer 3

要从共享一个公共“点击处理程序”的两个按钮中递增或递减计数器变量，可以执行以下操作：

var counter = 0;

function onClick(event) {

  if(event.currentTarget.classList.contains('like')) {
    counter += 1;
  }
  
  if(event.currentTarget.classList.contains('dislike')) {
    counter -= 1;
  }

  console.log(counter);

  document.querySelector('p span').innerText = counter;
}

document.querySelector('.like').addEventListener('click', onClick);
document.querySelector('.dislike').addEventListener('click', onClick);

<button class="like">Like</button>
<button class="dislike">Dislike</button>
<p>Counter:<span></span></p>

Answer 4

是的，这是我想要的。但是我必须按下按钮添加功能。只需单击一下。一个用户必须单击一次。

var counter = 0;

function onClick(event) {

  if(event.currentTarget.classList.contains('like')) {
    counter += 1;
  }
  
  if(event.currentTarget.classList.contains('dislike')) {
    counter -= 1;
  }

  console.log(counter);

  document.querySelector('p span').innerText = counter;
}

document.querySelector('.like').addEventListener('click', onClick);
document.querySelector('.dislike').addEventListener('click', onClick);

<button class="like">Like</button>
<button class="dislike">Dislike</button>
<p>Counter:<span></span></p>

Answer 5

这是逻辑：

可以说我们的投票值为“ 0”。

用户投票评论。该值现在为“ 1”。

然后，用户改变主意并对其进行否决。现在的值是“ -1”，而不是0。

用户不能多次投票。

编辑：我添加了“取消投票”功能：用户可以单击两次“投票”，第一次单击，再单击两次以重置投票。

要验证用户是否已投票/否投票，我验证了按钮的innerHTML状态（已打开的Ex为“ [upvote]”并已关闭其upvote）

这里正在起作用：

    function del(){
      //Get vote status
      upvote=document.getElementById("upvote");
      downvote=document.getElementById("downvote");
      //Get counter
      count=document.getElementById("count");

      //Reverb back vote to before
      if(upvote.innerHTML=="[upvote]"){
        //The user upvoted, reset vote
        count.innerHTML=parseInt(count.innerHTML)-1;
        //Reset styling
        upvote.innerHTML="upvote";
      }else{//The user downvoted, reset vote
        count.innerHTML=parseInt(count.innerHTML)+1;
        downvote.innerHTML="downvote";
      }
    upvote.href="javascript:change('0')";
    downvote.href="javascript:change('1')";
    }
    function change(arg){
      //Get upvote count
      count=document.getElementById("count");
      //Get links
      upvote=document.getElementById("upvote");
      downvote=document.getElementById("downvote");
      
      if(arg==0){
        //If user wants to upvote
      
        //add effect to upvote button
        upvote.innerHTML="[upvote]";
        upvote.href="javascript:del()";
      
        //Update counter
        if(downvote.innerHTML=="[downvote]"){
          //If the user downvoted before
          //Add two votes instead of one
          count.innerHTML=parseInt(count.innerHTML)+2;
        }else{//User didnt downvoted before, add 1
        count.innerHTML=parseInt(count.innerHTML)+1;
        }
        
        //Reset downvote styling
        downvote.innerHTML="downvote";
        downvote.href="javascript:change('1')";
      }
      if(arg==1){
        //If user wants to downvote
        
        //Make downvote unclickable
        downvote.innerHTML="[downvote]";
        downvote.href="javascript:del()";
        
        //Update counter
        if(upvote.innerHTML=="[upvote]"){
          //If the user upvoted before
          //Remove two votes instead of one
          count.innerHTML=parseInt(count.innerHTML)-2;
        }else{//User didnt upvote before, remove 1
        count.innerHTML=parseInt(count.innerHTML)-1;
        }
        //Reset upvote styling
        upvote.innerHTML="upvote";
        upvote.href="javascript:change('0')";
      }
    }

    <a href="javascript:change('0')" id="upvote">Upvote</a> or <a href="javascript:change('1')" id="downvote">Downvote</a><br>

    <div id="count">50</div>

希望这会有所帮助！

我如何做“当我单击其他按钮计数器更改时”

5 个答案: