Estoy creando una página de productos de videojuegos, con JS generé el HTML de cada producto.
El tema es, quiero poder ordenar cada producto y generarlo, pero al hacerlo, se muestra la lista de productos ordenada, y también la generada por default.
- ¿Cómo puedo eliminar ese HTML generado anteriormente?
Ya intenté por ejemplo con seccionJuegos.removeChild(contenedor)
, pero me toma como que el contenedor no existe.
Código Javascript:
// CLASES
let entrada = parseInt(prompt('¿Cómo desea ordenar los videojuegos? \n 1: A-Z \n 2: Z-A \n 3: Menor precio \n 4: Mayor precio'));
// Creamos clase para los videojuegos
class Juego {
constructor(nombre, id, genero, precio) {
this.nombre = nombre;
this.id = id;
this.genero = genero;
this.precio = precio;
}
}
// ARRAYS
// Creamos el array de videojuegos
const juegos = [];
juegos.push(new Juego('FIFA 21', 1, 'deportes', 59.99));
juegos.push(new Juego('Call of Duty: Cold War', 2, 'fps', 69.99));
juegos.push(new Juego("Assassin's Creed: Valhalla", 3, 'aventura', 89.99));
juegos.push(new Juego('Cyberpunk 2077', 4, 'aventura', 29.99));
juegos.push(new Juego('Battlefield V', 5, 'fps', 59.99));
juegos.push(new Juego('The Last Of Us II', 6, 'horror', 59.99));
juegos.push(new Juego('Resident Evil VIII', 7, 'horror', 79.99));
juegos.push(new Juego('Red Dead Redemption 2', 8, 'acaventura', 29.99));
juegos.push(new Juego('PES 2021', 9, 'deportes', 19.99));
juegos.push(new Juego('ARK', 10, 'aventura', 69.99));
juegos.push(new Juego('HALO: Infinite', 11, 'fps', 89.99));
juegos.push(new Juego('Animal Crossing', 12, 'simulador', 49.99));
juegos.push(new Juego('GTA V', 13, 'accion', 39.99));
juegos.push(new Juego('Uncharted 4', 14, 'aventura', 39.99));
juegos.push(new Juego('Minecraft', 15, 'aventura', 19.99));
juegos.push(new Juego('Age Of Empires IV', 16, 'estrategia', 39.99));
juegos.push(new Juego('Dragon Ball Xenoverse', 17, 'accion', 19.99));
juegos.push(new Juego('Chivalry II', 18, 'accion', 79.99));
juegos.push(new Juego('Far Cry 6', 19, 'aventura', 89.99));
juegos.push(new Juego('God Of War IV', 20, 'aventura', 49.99));
const seccionJuegos = document.getElementById('games');
for(const juego of juegos) {
crearCard(juego);
}
// FUNCIONES
contenedor = '';
function crearCard(objeto) {
contenedor = document.createElement('article');
contenedor.classList.add('game');
contenedor.innerHTML = `<img class="game__img" src="img/games/game${objeto.id}.jpg" alt="${objeto.nombre}">
<h2 class="game__title">${objeto.nombre}</h2>
<div>
<p class="game__price">Price: ${objeto.precio}$</p>
<button class="game__button" type="button">Add to Cart</button>
</div>`
seccionJuegos.appendChild(contenedor);
}
Código HTML:
<section class="games" id="games">
<!-- JUEGO 1 -->
</section>