Javascript display ball with number when clicked

Question

The below code showing that i click 4 times, the output like pic1

  let sep = s.messages[s.player_at_the_table] == "" ? "" : "・";
  s.messages[s.player_at_the_table] += sep + "1";
  s.messages[s.player_at_the_table ^ 1] = "";

pic1 - current output

I would like to make it like pic2, the sum the output with red ball background.

pic2 - my expect output

This link is my web JS link: https://score-uat.hk147.com/matches/score/G2fyH2CCgsuX3kLXX

Answer 1

Actually You are not giving that much details about the question, but let me try !

document.querySelector(".counter").addEventListener("click", function () {
  this.textContent = parseInt(this.textContent.trim()) + 1;
});

.counter{
  font-size: 30px;
  --size: 2em;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: #ff0000;
  color: #ffffff;
  box-shadow: 0px 0px 0.25rem 0px hsla(0, 0%, 50%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: transform 100ms ease;
  cursor: pointer;
  user-select: none;
}

.counter:active{
  transform: translate(-50%, -50%) scale(0.9);
}

    <div class="counter">0</div>