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>