I'm making a ping pong game in html canvas , I'm having 4 buttons , 2 for each player to control the paddles but I can't figure out how to control them Adding an "onclick" eventlistener and changing the y velocity , this dosent work as let's assume i pressed the down button for player 1

The paddle will go down but when the button is released the paddle keeps going untill another button is pressed

Let the control buttons be

const p1up = document.getElementById('p1up')
const p1down = document.getElementById('p1down')

const p2up = document.getElementById('p2up')
const p2down = document.getElementById("p2down")

And this is the paddle class

       class paddle {
         constructor(x, y) {
            this.x = x
            this.y = y
            this.ysp = 0
        }
           draw() {
           ctx.fillStyle = "#fff"
           ctx.beginPath()
           ctx.rect(this.x, this.y, 10, 80)
           ctx.fill()
        }
           update() {
           this.y += this.ysp
        }
          limit() {
          this.y = clamp(this.y, 0, area.height)
        }
       }