Tengo un problema y es que al momento de imprimir los ataques en el html, están saliendo mal. Algunas veces sale “undefined” otras veces ...

Tengo un problema y es que al momento de imprimir los ataques en el html, están saliendo mal. Algunas veces sale “undefined” otras veces sencillamente sale un ataque equivocado. En la consola todo aparece funcionando bien, incluso aparecen los ataques que en efecto se escogieron. He revisado todo el código y repasado las clases y no entiendo cuál es el problema. Por favor ayudaa.

Este es el error como se ve en la página

Mi código js

const sectionElegirAtaque = document.getElementById("seleccionar-ataque")
const notBotonReiniciar = document.getElementById("boton-reiniciar")
const botonMascotaJugador = document.getElementById("boton-mascotas")
const botonReiniciar = document.getElementById("boton-reiniciar")

const sectionElegirMascota = document.getElementById("seleccionar-mascota")
const spanMascotaJugador = document.getElementById("nombre-mascota-jugador")
const spanMascotaEnemigo = document.getElementById("nombre-mascota-enemigo")
const spanVictoriasJugador = document.getElementById("victorias-jugador")
const spanVictoriasEnemigo = document.getElementById("victorias-enemigo")

const sectionMensajes = document.getElementById("resultado-combate")
const sectionMensajesJugador = document.getElementById("lista-ataques-jugador")
const sectionMensajesEnemigo = document.getElementById("lista-ataques-enemigo")
const contenedorTarjetas = document.getElementById("contenedor-tarjetas")
const contenedorAtaques = document.getElementById("contenedor-ataques")

let mokepones=[]
let ataqueJugador=[]
let ataqueEnemigo=[]
let opcionDeMokepones
let opcionDeAtaques
let ataquesMokeponEnemigo
let mascotaJugador 
let input1 
let input2 
let input3 
let botonFuego 
let botonAgua
let botonTierra
let botones=[] 
let indexAtaqueJugador
let indexAtaqueEnemigo
let victoriasJugador = 0
let victoriasEnemigo = 0

class Mokepon{
    constructor(nombre, foto, vida){
        this.nombre = nombre
        this.foto = foto
        this.vida = vida
        this.ataques = []
    }
}

let hipodoge = new Mokepon('Hipodoge', './assets/mokepons_mokepon_hipodoge_attack.png', 5)
let capipepo = new Mokepon('Capipepo', './assets/mokepons_mokepon_capipepo_attack.png', 5)
let ratigueya = new Mokepon('Ratigueya', './assets/mokepons_mokepon_ratigueya_attack.png', 5)

hipodoge.ataques.push(
    {nombre:'💧', id: 'boton-agua'},
    {nombre:'💧', id: 'boton-agua'},
    {nombre:'💧', id: 'boton-agua'},
    {nombre:'🔥', id: 'boton-fuego'},
    {nombre:'🌱', id: 'boton-tierra'}
)
capipepo.ataques.push(
    {nombre:'🌱', id: 'boton-tierra'},
    {nombre:'🌱', id: 'boton-tierra'},
    {nombre:'🌱', id: 'boton-tierra'},
    {nombre:'🔥', id: 'boton-fuego'},
    {nombre:'💧', id: 'boton-agua'}
)
ratigueya.ataques.push(
    {nombre:'🔥', id: 'boton-fuego'},
    {nombre:'🔥', id: 'boton-fuego'},
    {nombre:'🔥', id: 'boton-fuego'},
    {nombre:'💧', id: 'boton-agua'},
    {nombre:'🌱', id: 'boton-tierra'}
)

mokepones.push(hipodoge, capipepo, ratigueya)



function iniciarJuego () {
    sectionElegirAtaque.style.display = "none"

    mokepones.forEach((mokepon) =>{
        opcionDeMokepones = `
        <input type = "radio" name="mascota" id=${mokepon.nombre}>
        <label class="tarjeta-mokepones" for="${mokepon.nombre}">
            <p> ${mokepon.nombre} </p>
            <img src=${mokepon.foto} alt=${mokepon.nombre}>
        </label>
        `
        contenedorTarjetas.innerHTML += opcionDeMokepones
        input1 = document.getElementById("Hipodoge")
        input2 = document.getElementById("Capipepo")
        input3 = document.getElementById("Ratigueya")
    })

    notBotonReiniciar.style.display = "none"
    botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
    botonReiniciar.addEventListener("click", reiniciarJuego)
}
function seleccionarMascotaJugador(){
    sectionElegirMascota.style.display = "none"
    sectionElegirAtaque.style.display = "flex"
    
    if(input1.checked){
        spanMascotaJugador.innerHTML = input1.id
        mascotaJugador = input1.id
    } else if (input2.checked){
        spanMascotaJugador.innerHTML = input2.id
        mascotaJugador = mascotaJugador = input2.id
    } else if (input3.checked){
        spanMascotaJugador.innerHTML = input3.id
        mascotaJugador = mascotaJugador = input3.id
    } else {
        alert("No has seleccionado a tu mascota ☹")
    }
    extraerAtaques(mascotaJugador)
    seleccionarMascotaEnemigo()
}
function extraerAtaques(mascotaJugador){
    let ataques
    for (let i = 0; i < mokepones.length; i++) {
        if (mascotaJugador===mokepones[i].nombre) {
            ataques= mokepones[i].ataques
        }
    }
    mostrarAtaques(ataques)
}

function mostrarAtaques(ataques){
    ataques.forEach((ataque)=>{
        opcionDeAtaques = `
        <button id=${ataque.id} class = "boton-ataque BAtaques">${ataque.nombre}</button>
        `
    contenedorAtaques.innerHTML += opcionDeAtaques

    })
    botonAgua = document.getElementById('boton-agua')
    botonFuego = document.getElementById('boton-fuego')
    botonTierra = document.getElementById('boton-tierra')
    botones = document.querySelectorAll('.BAtaques')
}

function secuenciaAtaque(){
    botones.forEach((boton)=>{
        boton.addEventListener('click', (e) =>{
            if (e.target.textContent === '🔥') {
                ataqueJugador.push('FUEGO')
                console.log(ataqueJugador)
                boton.style.background='#112f58'
            } else if (e.target.textContent === '💧') {
                ataqueJugador.push('AGUA')
                console.log(ataqueJugador)
                boton.style.background='#112f58'
            } else {
                ataqueJugador.push('TIERRA')
                console.log(ataqueJugador)
                boton.style.background='#112f58'
            }
            ataqueAleatorioEnemigo()
        })
    })
    
}
        

function seleccionarMascotaEnemigo(){
    let mascotaEnemigo = aleatorio(0, mokepones.length -1)
    
    spanMascotaEnemigo.innerHTML = mokepones[mascotaEnemigo].nombre
    ataquesMokeponEnemigo = mokepones[mascotaEnemigo].ataques
    secuenciaAtaque()
}

function ataqueAleatorioEnemigo(){
    let ataqueAleatorio = aleatorio(0,ataquesMokeponEnemigo.length -1)
    if (ataqueAleatorio == 0 || ataqueAleatorio == 1){
        ataqueEnemigo.push('FUEGO')
    } else if (ataqueAleatorio == 3 || ataqueAleatorio == 4){
        ataqueEnemigo.push('AGUA')
    }else{
        ataqueEnemigo.push('TIERRA')
    } 
    console.log(ataqueEnemigo)
    iniciarPelea()
}

function iniciarPelea(){
    if (ataqueJugador.length === 5) {
        combate()
    }
}

function indexAmbosOponentes (jugador, enemigo){
    indexAtaqueJugador = ataqueJugador[jugador]
    indexAtaqueEnemigo = ataqueEnemigo[enemigo]
}

function combate(){

    for (let index = 0; index < ataqueJugador.length; index++) {
        if(ataqueJugador[index] === ataqueEnemigo[index]){
            indexAmbosOponentes(index, index)
            createMessage("¡Empataste!")
        }else if((ataqueJugador[index] === 'FUEGO' && ataqueEnemigo[index] === 'TIERRA') || (ataqueJugador[index] === 'AGUA' && ataqueEnemigo[index] === 'FUEGO') || (ataqueJugador[index] === 'TIERRA' && ataqueEnemigo[index] === 'AGUA')) {
            indexAmbosOponentes[index, index]
            createMessage('¡Ganaste!')
            victoriasJugador++
            spanVictoriasJugador.innerHTML = victoriasJugador
        }else{
            indexAmbosOponentes[index, index]
            createMessage('¡Perdiste!')
            victoriasEnemigo++
            spanVictoriasEnemigo.innerHTML = victoriasEnemigo
        }
    }
    revisarVictorias()
}

function revisarVictorias(){
    if(victoriasJugador === victoriasEnemigo){
        createFinalMessage('¡VAYA! Has empatado 😮')
    } else if (victoriasJugador > victoriasEnemigo){
        createFinalMessage("¡¡FELICITACIONES!! Tu mascota ha ganado 🏆")
    } else if (victoriasJugador < victoriasEnemigo){
        createFinalMessage("¡¡RAYOS!! Tu mascota ha muerto 💀")
    }
}

function createMessage(resultadoCombate){

    let nuevoAtaqueJugador = document.createElement("p")
    let nuevoAtaqueEnemigo = document.createElement("p")

    sectionMensajes.innerHTML = resultadoCombate
    nuevoAtaqueJugador.innerHTML = indexAtaqueJugador
    nuevoAtaqueEnemigo.innerHTML = indexAtaqueEnemigo

    sectionMensajesJugador.appendChild(nuevoAtaqueJugador)
    sectionMensajesEnemigo.appendChild(nuevoAtaqueEnemigo)
}

function createFinalMessage(resultadoFinal){

    sectionMensajes.innerHTML = resultadoFinal
    
    botonFuego.disabled = true    
    botonAgua.disabled = true
    botonTierra.disabled = true

    notBotonReiniciar.style.display = "block"
}

function reiniciarJuego(){
    location.reload()
}

function aleatorio(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min)
    }
window.addEventListener("load", iniciarJuego)

Y mi código html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> MOKEPON! </title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>

        <section id = "seleccionar-mascota">
            <h1 class = "title"> Mokepon </h1>
            <h2 class = "subtitle">Elige tu mascota:</h2>
            <div id="contenedor-tarjetas" class="tarjetas"></div>
            <button id="boton-mascotas">Seleccionar</button>
        </section>

        <section id = "seleccionar-ataque">
            <h1 class = "title"> Mokepon </h1>
            <h2 class = "subtitle">Elige tu ataque:</h2>
            <div id="contenedor-ataques"  class="botones-ataques">
            </div>
            <div id="mensajes">
                <section id="resultado-combate">¡¡Mucha suerte, entrenador!!</section>
                <section id="reiniciar">
                    <button id="boton-reiniciar"> Juega nuevamente </button>
                </section>
            </div>

            <div class="ataques">
                <div id="ataques-jugador"> 
                    <p id="victorias-jugador"> 0 </p>
                    <p> Tu mascota 👤 </p>
                    <p id="nombre-mascota-jugador"></p>
                    <div id = "lista-ataques-jugador"> </div>
                </div>
                
                <div id="ataques-enemigo">
                    <p id="victorias-enemigo"> 0 </p>
                    <p> Mascota del enemigo 👾</p>
                    <p id="nombre-mascota-enemigo"></p>
                    <div id = "lista-ataques-enemigo"> </div>
                </div>
            </div>
        </section>
        <script src="./js/codigo mokepon.js"></script>
    </body>
</html>