当我点击向上或向下按钮时，我怎样才能做到这一点，数字增加或减少

Question

I'm trying to make a vote feature so when someone clicks the up arrow, the number increases, and when someone clicks the down arrow, the number decreases.

Here's my html and css

 .upVote { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); background-color: white; border: none; }.downVote { transform: rotate(90deg); -webkit-transform: rotate(90deg); background-color: white; border: none; padding-bottom: -50; }

 <p>how do you vote?</p> <button class="upVote">></button> <span>0</span> <button class="downVote">></button>

Answer 1

Explanation: I have a added a function to increase/decrease the vote count depending on the parameter passed. That function is called from both up vote & down vote buttons (plus one vote from up vote button & minus one vote from down vote button). If you down want to have negative votes, you can add a check inside the function to make the vote 0 when the votes goes down to zero. Like this

vote = vote < 0 ? 0 : vote;

Try this.

 var vote = 0; const voteFun =(val) => { vote = vote + val; vote = vote < 0? 0: vote; //If you want vote not to go below zero document.getElementById('voteDisplay').innerHTML = vote; }

 .upVote, .downVote{ cursor:pointer; background-color: white; border: none; }.downVote { transform: rotate(90deg); -webkit-transform: rotate(90deg); }.upVote { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); padding-bottom: -50; } </style>

 <p>how do you vote?</p> <button onclick="voteFun(-1)" class="downVote">></button> <span id="voteDisplay">0</span> <button onclick="voteFun(1)" class="upVote">></button>

Answer 2

 <style>.upVote { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); background-color: white; border: none; padding-bottom: -50; }.downVote { transform: rotate(90deg); -webkit-transform: rotate(90deg); background-color: white; border: none; } </style> <script> function upVoteFunction() { var current = parseInt(document.getElementById("vote").innerHTML); document.getElementById("vote").innerHTML = current + 1; } function downVoteFunction() { var current = parseInt(document.getElementById("vote").innerHTML); document.getElementById("vote").innerHTML = current>0? current - 1: 0; } </script> <p>how do you vote?</p> <button class="downVote" onClick="downVoteFunction()">></button> <span id="vote">0</span> <button class="upVote" onClick="upVoteFunction()">></button>