0

Estoy realizando un programa en JS, y no me va una función a la cual llamó un botón (boton-seleccionar) que posteriormente he creado con un innerHTML dentro de otra función. He probado varias maneras de llamarlo, a traves de javascript vanilla, como Jquery, pero ni aún asi me funciona, el programa pasa por alto completamente la existencia de dicho botón, adjunto mi código a continuación, a ver si vosotros sois capaces en ver que estoy fallando porque yo en cambio no consigo verlo. Un saludo. Ajunto mi código javascript a continuación, si necesitáis mas parte de mi código, hacedmelo saber y lo paso (el json no lo colocó debido a que contiene una cantidad de datos inmensa y se repiten mas que nada).

La linea de codigo donde esta el botón es la siguiente: fila.insertCell().innerHTML = <input type='submit' value='seleccionar' class='bg-secondary boton-seleccionar' data-code=${objetoJSON[i].id} data-code=${objetoJSON[i].name.english}>;

//LLAMADA POKEDEX.JSON
    window.addEventListener("load", function () {
        document.getElementById("boton-json").addEventListener("click", function (event) {
            event.preventDefault();
            var xhr = new XMLHttpRequest();
            let boton_seleccionar = '';
            let idPokemon = document.getElementById("identificador").value;
            let nombrePokemon = document.getElementById("pokemon").value;
            //console.log("Comprobación de que el botón json funciona")
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    procesarRespuestaJSON1(this.responseText, idPokemon, nombrePokemon);
                } else if (this.readyState == 4) {
                    console.error('Error al hacer la petición: ' + this.status);
                }
            }
            xhr.open('GET', 'data/pokedex.json', true);
            xhr.send();
        });

    });


    //MOSTRAR TODOS LOS POKEMON | MOSTRAR POR NOMBRE | MOSTRAR POR ID | IGNORAR ID - MOSTRAR NOMBRE
    function procesarRespuestaJSON1(respuesta, idPokemon, nombrePokemon) {
        let objetoJSON = JSON.parse(respuesta);
        let tabla = document.createElement('table');
        tabla.innerHTML = "<thead class='border border-white'><tr class='border border-white'><th class='border border-white'>ID</th><th class='border border-white'>Nombre</th><th class='border border-white'>Tipos</th><th class='border border-white'>Opciones</th></tr></thead>";

        //RECORREMOS LA POKEDEX Y VAMOS CUMPLIENDO SEGÚN LAS CONDICIONES
        for (var i = 0; i < objetoJSON.length; i++) {
            //MOSTRAMOS TODOS SI AMBOS CAMPOS ESTAN VACIOS
            if ((nombrePokemon == '') && (idPokemon == '')) {
                var fila = tabla.insertRow()
                fila.insertCell().innerText = objetoJSON[i].id
                fila.insertCell().innerText = objetoJSON[i].name.english
                fila.insertCell().innerText = objetoJSON[i].type
                fila.insertCell().innerHTML = `<input type='submit' value='seleccionar' class='bg-secondary boton-seleccionar' data-code=${objetoJSON[i].id} data-code=${objetoJSON[i].name.english}>`;
                //MOSTRAMOS EL POKEMON INDICADO SEGÚN EL NOMBRE
            } else if ((idPokemon == '') && (objetoJSON[i].name.english == nombrePokemon)) {
                var fila = tabla.insertRow()
                fila.insertCell().innerText = objetoJSON[i].id
                fila.insertCell().innerText = objetoJSON[i].name.english
                fila.insertCell().innerText = objetoJSON[i].type
                fila.insertCell().innerHTML = `<input type='submit' value='seleccionar' class='bg-secondary boton-seleccionar' data-code=${objetoJSON[i].id} data-code=${objetoJSON[i].name.english}>`;
                //MOSTRAMOS LOS POKEMONS SEGÚN HASTA EL ID INDICADO
            } else if ((objetoJSON[i].id <= idPokemon) && (nombrePokemon == '')) {
                var fila = tabla.insertRow()
                fila.insertCell().innerText = objetoJSON[i].id
                fila.insertCell().innerText = objetoJSON[i].name.english
                fila.insertCell().innerText = objetoJSON[i].type
                fila.insertCell().innerHTML = `<input type='submit' value='seleccionar' class='bg-secondary boton-seleccionar' data-code=${objetoJSON[i].id} data-code=${objetoJSON[i].name.english}>`;
                //MOSTRAMOS EL POKEMON SEGÚN SU NOMBRE E IGNORANDO EL CAMPO ID
            } else if ((idPokemon) && (nombrePokemon)) {
                if (objetoJSON[i].name.english == nombrePokemon) {
                    var fila = tabla.insertRow()
                    fila.insertCell().innerText = objetoJSON[i].id
                    fila.insertCell().innerText = objetoJSON[i].name.english
                    fila.insertCell().innerText = objetoJSON[i].type
                    fila.insertCell().innerHTML = `<input type='submit' value='seleccionar' class='bg-secondary boton-seleccionar' data-code=${objetoJSON[i].id} data-code=${objetoJSON[i].name.english}>`;
                }

            }
        }
        $('.boton-seleccionar').click(function(event)
        {
            event.preventDefault();
            console.log("pinchado");
        })
        document.getElementById("contenedor").innerHTML = tabla.outerHTML;

    }
    
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <title>POKEDEX - PRÁCTICA 3</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/css/styles.css">
    <link rel="icon" href="styles/img/icono-pagina.png" type="image/ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>

<body>
    <div id="portada" class="my-row ">
        <div class="container fluid padding-portada">
            <div class="row text-center align-items-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <img src="styles/img/logopokemon.png" class="img-fluid aumento">
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <script>
                        window.addEventListener('load', function () {
                            let myAudio = document.getElementById("myAudio");
                            myAudio.onplaying = function () {
                                isPlaying = true;
                            };
                            myAudio.onpause = function () {
                                isPlaying = false;
                            };
                        });
                        let isPlaying = false;

                        function togglePlay() {
                            if (isPlaying) {
                                myAudio.pause()
                            } else {
                                myAudio.play();
                            }
                        }
                    </script>
                    <audio id="myAudio" src="./styles/music/musica.mp3" preload="auto"></audio>

                    <a class="btn" role="button" onClick="togglePlay()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor"
                            class="bi bi-play-circle-fill" viewBox="0 0 16 16">
                            <path
                                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                        </svg></a></p>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div id="interfaz" class="my-row ">
        <div class="container fluid padding-interfaz">
            <div class="row text-center align-items-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                        <path
                            d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2c-4.08 0-7.45 3.05-7.94 7h4.07c.44-1.73 2.01-3 3.87-3c1.86 0 3.43 1.27 3.87 3h4.07c-.49-3.95-3.86-7-7.94-7m0 16c4.08 0 7.45-3.05 7.94-7h-4.07c-.44 1.73-2.01 3-3.87 3c-1.86 0-3.43-1.27-3.87-3H4.06c.49 3.95 3.86 7 7.94 7m0-10a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2z"
                            fill="currentColor" /></svg>
                    <label for="numero" class="texto">Introduce el ID:</label>
                    <input type="number" id="identificador" name="identificador" placeholder="ID del Pokemon" min="1">
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                        <path
                            d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2c-4.08 0-7.45 3.05-7.94 7h4.07c.44-1.73 2.01-3 3.87-3c1.86 0 3.43 1.27 3.87 3h4.07c-.49-3.95-3.86-7-7.94-7m0 16c4.08 0 7.45-3.05 7.94-7h-4.07c-.44 1.73-2.01 3-3.87 3c-1.86 0-3.43-1.27-3.87-3H4.06c.49 3.95 3.86 7 7.94 7m0-10a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2z"
                            fill="currentColor" /></svg>
                    <label for="nombre" class="texto">Introduce el nombre:</label>
                    <input type="text" id="pokemon" name="pokemon" placeholder="Nombre del Pokemon">
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <button id="boton-json">Cargar JSON</button>
                    <button id="boton-mostrar">Mostrar seleccionados</button>
                </div>
            </div>
        </div>
    </div>
    <div id="interfaz" class="my-row ">
        <div class="container fluid">
            <div class="row text-center align-items-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <button onClick="window.location.reload();" class="mt-4">Refresh Page</button>
                </div>
            </div>
        </div>
    </div>
    <div id="zona-pokemon" class="my-row mt-4">
        <div class="container">
            <div class="row text-center align-items-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div id="contenedor" class="tabla">

                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="scripts/script.js"></script>
</body>

</html>

2
  • y el html? coloca completo tu codigo para ayudarte mejor Commented el 31 ene. 2022 a las 22:05
  • Listo, colocado el html.
    – Puntoycoma
    Commented el 31 ene. 2022 a las 22:08

1 respuesta 1

1

El problema es que estás tratando de ejecutar una acción con un botón que JS no conoce porque aún no está creado en el DOM. Cuando por fin se crea, no puede encontrar ningún evento.

Posibles soluciones:

  • Ubicar esta línea document.getElementById("contenedor").innerHTML = tabla.outerHTML; antes del código $('.boton-seleccionar').click(function(event){...}

  • Sacar el fragmento $('.boton-seleccionar').click(function(event){...} de la función procesarRespuestaJSON1(...) a una función independiente y asignar el evento onclick="botonSeleccionar()" en los botones con clase .boton-seleccionar.

function botonSeleccionar() {
    console.log("pinchado");
}
  • Sacar el fragmento $('.boton-seleccionar').click(function(event){...} de la función procesarRespuestaJSON1(...) a una función independiente y ejecutar la nueva función después de haber creado todos los elementos del DOM.
function procesarRespuestaJSON1(respuesta, idPokemon, nombrePokemon) {
    ...
    botonSeleccionar();
}

function botonSeleccionar() {
    $('.boton-seleccionar').click(function(event) {
        event.preventDefault();
        console.log("pinchado");
    })
}

Intenta y comenta si surgen dudas al respecto.

1
  • ¡El botón por fin reacciona, muchisimas gracias de verdad!, lo he conseguido con la primera opción que propusiste, ubicarlo antes de la linea $('.boton-seleccionar').click(function(event){...} . Me estaba volviendo loco ya y estaba bloqueado mentalmente.
    – Puntoycoma
    Commented el 31 ene. 2022 a las 23:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.