scripts.js:146 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'querySelector') at elegirCarta

Question

Good morning, I'm doing a school practice named pokemon ultimate battle experience the game consists of 10 cards (5 for the player, 5 for the PC), when you click in a card, it goes in the middle, the PC throws a card from his deck and depending of the experience that the card has it goes to the hand of the player or the PC (those cards can't be used anymore) then, the experience of the two cards thrown are added to a counter showed in the game, the first who arrives at 1000 points win .

This is how it looks:

enter image description here first view of the game
enter image description here how the cards move to the hand of PC/player (I forgot to mention that if the player or PC wins the assault the winner keeps playing)

enter image description here The HTML structure (it's in spanish but i think it can be understood)

enter image description here This is an example of the structure of the cards

The exam is divided in several parts (DOM manipulation, AI of the PC, and AJAX calls), everything is done except the AI, the problem is the next one:

function elegirCarta() {
    let cartaElegida;

    if (document.getElementById("play").querySelectorAll(".carta").length == 1){
        // experiencia carta jugador
        let exp = parseInt(jugadaPlayer.querySelector(".carta .experiencia").innerText);
        cartasMaquina = machine.querySelectorAll(".carta");

        let i = 0;
        while (!cartaElegida || i < cartasMaquina.length){
            //console.log( "?"+(parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText)));
            if (parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText) === exp) {
                //comprobar puntuacion
                if (parseInt(totalMachine.innerText)
                    + parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText) >= 1000){
                    cartaElegida = cartasMaquina[i];
                }
            }
            else if(parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText > exp)){
                cartaElegida = cartasMaquina[i];
            }
            i++;
        }
        if (!cartaElegida){
            cartaElegida = cartasMaquina[0];
        }
    } else{
       //la maquina elige una carta random
        let aleatorio = Math.floor(Math.random() *cartasMaquinas.length);
        console.log("Aleatorio: " + aleatorio);
        console.log("length cartasmaquina"+cartasMaquinas.length);
        cartaElegida = cartasMaquinas[aleatorio - 1]; // Restamos 1 para ajustar al índice del array

    }
    return cartaElegida;
}

In this part of the code we handle the AI of the machine (PC), we declare a variable named "cartaElegida" and return it, first we find out if in the play div are, at least one card and in a variable named "exp" we store the exp that has the card that throws the player, then in a while loop if there's no "carta elegida" or i is less than the array of cartasMaquina (note that cartasMaquina contains the cards of the deck of the machine) the problem goes in the first if

if (parseInt(cartasMaquina[i].querySelector(".carta .experiencia").innerText) === exp) {

I don't understand why it says that the querySelector is undefined, and I suposed that, by order of code, it's wrong as well in the following ones, but if I solve this it should be solved in the others

I tried changing the name of cartasMaquina for cartasMaquinas

if (parseInt(cartasMaquinas[i].querySelector(".carta .experiencia").innerText) === exp) {

But unfortunately that wont work because that are quite different variables, I know that is quite abstract but if someone finds the mistake or had an experience similar like this one before and knows the solution, I would be very appreciated