Tengo este código donde intento hacer que funcione la librería Sweet Alert y no consigo que lo haga... debería funcionar al hacer click en el botón de compra de cualquiera de los productos, pero por más que pruebo, no encuentro el error... me imagino que es porque se repite varias veces el id "compra" en el archivo html y esto es contraproducente al código javascript. Quizás se debería pintar estos botones en el DOM recorriendo un array con un forEach con un solo id, pero quisiera saber si el error del por qué no funciona en este instante el Sweet Alert es justamente ese...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tipografias -->
<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=Montserrat:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<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=Josefin+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Css Aos -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Css Principal -->
<link rel="stylesheet" href="../css/estilo.css"/>
<title>Productos</title>
</head>
<body>
<!-- header -->
<header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-xs-12">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="../index.html">
<img src="../assets/img/logo.png" width="200" height="100" alt="logo" class="logoPrincipal">
</a>
</nav>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-xs-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
</div>
</nav>
</div>
</div>
</div>
</header>
<!-- fin header -->
<!-- section -->
<section>
<!--div corsets-->
<div class="container-fluid">
<div class="row ">
<div class="col-lg-12 col-xs-12">
<h2>Corsets</h2>
<div>
<img src="../assets/img/corset1.jpg" alt="corset1" class="productos" data-aos="flip-left" ata-aos-easing="ease-out-cubic"
data-aos-duration="3000">
<button id="compra">Comprar</button>
<img src="../assets/img/corset2.jpg" alt="corset2" class="productos" data-aos="flip-up" ata-aos-easing="ease-out-cubic"
data-aos-duration="3000">
<button id="compra">Comprar</button>
<img src="../assets/img/corset3.jpg" alt="corset3" class="productos" data-aos="flip-right" ata-aos-easing="ease-out-cubic"
data-aos-duration="3000">
<button id="compra">Comprar</button>
</div>
</div>
</div>
</div>
<!--fin div corsets-->
<!--div carteras-->
<div class="container-fluid">
<div class="row ">
<div class="col-lg-12 col-xs-12">
<h2>Carteras</h2>
<div>
<img src="../assets/img/cartera1.jpg" alt="cartera1" class="productos" data-aos="flip-left" ata-aos-easing="ease-out-cubic"
data-aos-duration="3000">
<button id="compra">Comprar</button>
<img src="../assets/img/cartera2.jpg" alt="cartera2" class="productos" data-aos="flip-right" ata-aos-easing="ease-out-cubic"
data-aos-duration="3000">
<button id="compra">Comprar</button>
</div>
</div>
</div>
</div>
<!--fin div carteras-->
</section>
<!-- Fin Section-->
<!-- Css Aos -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!-- Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="app.js"></script>
<script src="main.js"></script>
</body>
</html>
const compra = document.getElementById ('compra');
compra.addEventListener("click", () =>{
Swal.fire({
title: 'Realizar compra!',
text: 'Haz click en el boton!',
icon: 'success',
confirmButtonText: 'Aceptar'
})
})