Как сделать так, чтобы при нажатии кнопки вверх или вниз число увеличивалось или уменьшалось

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

Объяснение: Я добавил функцию для увеличения / уменьшения количества голосов в зависимости от переданного параметра. Эта функция вызывается как с помощью кнопок «вверх», так и «вниз» (плюс один голос от кнопки «вверх» и «минус один голос» от кнопки «вниз»). Если вы хотите получить отрицательный голос, вы можете добавить проверку внутри функции, чтобы сделать голос 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>