What is the issue with this JS code! [Type Error] it says error is where I've used 'add' and 'remove'

Question

I made a score keeper for my school project and its showing type error and I really have no idea how to resolve this thing!

It keeps on showing this error in the same two lines:

app101.js:56 Uncaught TypeError: Cannot read property 'remove' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:56)
(anonymous) @ app101.js:56
app101.js:40 Uncaught TypeError: Cannot read property 'add' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:40)
(anonymous) @ app101.js:40
2app101.js:56 Uncaught TypeError: Cannot read property 'remove' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:56)
(anonymous) @ app101.js:56
app101.js:22 Uncaught TypeError: Cannot read property 'add' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:22)
(anonymous) @ app101.js:22
app101.js:56 Uncaught TypeError: Cannot read property 'remove' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:56)
(anonymous) @ app101.js:56
app101.js:40 Uncaught TypeError: Cannot read property 'add' of undefined
    at HTMLButtonElement.<anonymous> (app101.js:40)

var button1 = document.querySelector("#ctr1")
var playerOneScore = document.querySelector("#score1")
var score1 = 0

var button2 = document.querySelector("#ctr2")
var playerTwoScore = document.querySelector("#score2")
var score2 = 0

var reset =  document.querySelector("#resetButton")

var winner =  document.querySelector("#winner")

button1.addEventListener('click', function(){

    var limit = document.querySelector("#limit").value;
    score1++ ;

    playerOneScore = score1;

    if (score1 == limit || (score1 > score2 && score1 > limit))
    {
        playerOneScore.classList.add("green")
        button1.setAttribute("disabled", "true")
        button2.setAttribute("disabled", "true")

        printWinner()
    }

})

button2.addEventListener('click', function(){

    var limit = document.querySelector("#limit").value;
    score2++ ;

    playerTwoScore = score2;

    if (score2 == limit || (score2 > score1 && score2 > limit))
    {
        playerTwoScore.classList.add("green")
        button1.setAttribute("disabled", "true")
        button2.setAttribute("disabled", "true")

        printWinner()
    }

})

reset.addEventListener("click", function()
{
    button1.removeAttribute("disabled")
    button2.removeAttribute("disabled")



    playerOneScore.classList.remove("green")
    playerTwoScore.classList.remove("green")
    score1 = 0
    score2 = 0

    playerOneScore.textContent = score1
    playerTwoScore.textContent = score2

    document.querySelector("#limit").value = 5

    winner.textContent = ""

})

function printWinner() {
    if (score1 > score2) {
        winner.textContent = "Player One"   
    }
    else
    {
        winner.textContent = "Player Two"

    }
}

Answer 1

There is a little mistake you are overriding the variable declared here:

var playerOneScore = document.querySelector("#score1")

by this affectation (line 18):

playerOneScore = score1;

so playerOneScore become a number, you try to access a property classList of it which is undefined and then try to access remove of this undefined, you get an Cannot read property 'remove' of undefined