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

Question

我正在尝试制作投票功能，因此当有人单击向上箭头时，数字会增加，而当有人单击向下箭头时，数字会减少。

这是我的 html 和 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

说明：我添加了一个 function 以根据传递的参数增加/减少投票计数。 function 从赞成票和反对票按钮都被调用（加上赞成票按钮一票，反对票按钮减去一票）。 如果您想要反对票，您可以在 function 中添加一个检查，以在票数降至零时使票数为0 。 像这样

vote = vote < 0 ? 0 : vote;

尝试这个。

 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>