Changing an element based on If / Else Statement

I coded a simple High - Low card game using javascript and replacing elements in the html to either display or be hidden.

I'm not the most advanced person in javascript but this is what I have so far: High Low Game: Codepen

// 1. create the array of the card numbers
// 2. generate a random selected card from the array and store it in a value
// 2b. generate a random card for the player
// 3. compare that value random card value with the players card
// 4. replace a element on display to show the array's value
// 5. award the player for selecting correctly
// 6. have a button to reset the game to play again, without resetting player points


// Step 1. Creating the Array of the Card Deck
const cardDeck = ["Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King"];
console.log(cardDeck);




// // Step 2. Picking a random value in the card deck array and storing it in a variable.
let randomCard = Math.floor(Math.random() * cardDeck.length);
console.log('The array position of the random card is: ' + randomCard); // randomCard is the array position
console.log('The randomly selected card is a: ' + cardDeck[randomCard]); // cardDeck[randomCard] is the value


//display the card on the website
document.getElementById('rC').innerHTML = "The Random Card is a: " + cardDeck[randomCard];





// Step 2b. Give the player their card
let playersCard = Math.floor(Math.random() * cardDeck.length);
console.log('The array position of the players card is: ' + playersCard); //playersCard is the array position
console.log('The players selected card is a: ' + cardDeck[playersCard]); // cardDeck[playersCard] is the value

//display the card on the website
document.getElementById('yC').innerHTML = "Your Card is a: " + cardDeck[playersCard];


// Declare a variable to store points
let points = 0;





// Step 3. Compare the cards

function lower() {
    if (playersCard < randomCard) {
        console.log('Correct, Your card was lower');
        document.getElementById('message').innerHTML = "Correct, Your card was lower";
        points++;
        pts();
        disableButton();
    } else if (playersCard === randomCard) {
        disableButton();
        console.log('Your card is the same, thats a push, no points');
        document.getElementById('message').innerHTML = 'Your card is the same, thats a push, no points';
    } else {
        disableButton();
        console.log('Wrong, Your card was higher')
        document.getElementById('message').innerHTML = "Wrong, Your card was higher";
    }
}

function higher() {
    if (playersCard > randomCard) {
        console.log('Correct, Your card was higher');
        document.getElementById('message').innerHTML = "Correct, Your card was higher";
        points++;
        pts();
        disableButton();
    } else if (playersCard === randomCard) {
        disableButton();
        console.log('Your card is the same, thats a push, no points');
        document.getElementById('message').innerHTML = 'Your card is the same, thats a push, no points';
    } else {
        disableButton();
        console.log('Wrong, Your card was lower')
        document.getElementById('message').innerHTML = "Wrong, Your card was lower";
    }
}









// Award the player points
function pts() {
    if (points === 1) {
        document.getElementById('pointsDisplay').innerHTML = "You Have: " + points + " point!";
    } else {
        document.getElementById('pointsDisplay').innerHTML = "You Have: " + points + " points!";
    }
}
pts();

//Disable the buttons once they select high or low
function disableButton() {
    document.getElementById('highButton').disabled = true;
    document.getElementById('lowButton').disabled = true;
    document.getElementById("result").classList.remove("hidden");

}


//Play Again Button
function playAgainButton() {
    document.getElementById('highButton').disabled = false;
    document.getElementById('lowButton').disabled = false;
    document.getElementById("result").classList.add("hidden");
}

function reset() {
    //reset the random card
    let random2 = Math.floor(Math.random() * cardDeck.length);
    randomCard = random2;
    //reset the players card
    let player2 = Math.floor(Math.random() * cardDeck.length);
    playersCard = player2;
    playAgainButton();
    document.getElementById('yC').innerHTML = "Your Card is a: " + cardDeck[playersCard];
    document.getElementById('rC').innerHTML = "The Random Card is a: " + cardDeck[randomCard];

    //clear the console for new game and put new logs in to see values
    console.clear();
    console.log(cardDeck);
    console.log('The array position of the random card is: ' + randomCard); // randomCard is the array position
    console.log('The randomly selected card is a: ' + cardDeck[randomCard]); // cardDeck[randomCard] is the value
    console.log('The array position of the players card is: ' + playersCard); //playersCard is the array position
    console.log('The players selected card is a: ' + cardDeck[playersCard]); // cardDeck[playersCard] is the value
}







// For adding class:

// document.getElementById("yc").classList.add("hidden");
// For removing class:

// document.getElementById("div1").classList.remove("classToBeRemoved");

My issue is when the card that gets chose using the Math.random function is the 1st element in the array, the 0 position, and thus being an "ACE" vs when it is a different position in the array.

1. If the card is the first position in the array, the ace, then display "Your card is an Ace"

2. Otherwise display "Your Card is a: (Not Ace)".

For some reason I cannot figure out how to incorporate this simple if / else statement and get it to display correctly.

Any help would be great thanks!