En este código se intenta incorporar un evento submit desde la función validarFormulario pero no hace nada... al parecer funciona bien pero trato de que aparezca por consola algo y no logro aún comprender... pensé que era que no existía el id en el HTML pero si existe y lo que deseo es que los datos que introduzca el usuario aparezcan en el DOM o al menos por consola
const categoria = ["REMERAS", "JEANS","VESTIDOS"];
class Producto {
constructor(codigo, nombre, precio, categoria){
this.codigo = parseInt(codigo);
this.nombre = nombre;
this.precio =(precio);
this.categoria = categoria;
}
}
const productos = [];
productos.push(new Producto(0001,"Remera Básica", 1500, categoria[0]));
productos.push(new Producto(0002," Remera Denim", 1700, categoria[0]));
productos.push(new Producto(1001,"Jean Clásico", 5000, categoria[1]));
productos.push(new Producto(1002,"Jean Oxford", 6800, categoria[1]));
productos.push(new Producto(2001,"Vestido Corto", 3500, categoria[2]));
productos.push(new Producto(2002, "Vestido Largo", 5560, categoria[2]));
console.log(productos);
let divProd= document.getElementById("productos");
for (const producto of productos) {
let divProducto= document.createElement("div");
divProducto.innerHTML=`<h2>Producto: ${producto.nombre}</h2>
<h2>Precio: $ ${producto.precio} </h2>
<button>Comprar</button><hr> `;
divProd.append(divProducto);
}
/*-------------HTML CONTACTO array + evento -------------*/
class Contactos{
constructor(nombre,email,telefono){
this.nombre=nombre.toUpperCase();
this.email=email;
this.telefono=telefono;
}
}
const contactos=[];
let datosContactos=document.getElementById('formulario');
datosContactos.addEventListener("submit", validarFormulario);
function validarFormulario(e){
e.preventDefault();
console.log("Formulario Enviado");
}
<!DOCTYPE html>
<html lang="en">
<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">
<!--link css bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--link css propio-->
<link rel="stylesheet" href="../CSS/main.css">
<script src="../JS/main.js"></script>
<title>CHITA Indumentaria - Contacto</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="../index.html">
<img src="../imagenes/logo.png" alt="logo" width="100" height="100"
class="d-inline-block align-text-top">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../index.html">Inicio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Productos
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="../paginas/productos/remeras.html">Remeras</a></li>
<li><a class="dropdown-item" href="../paginas/productos/jeans.html">Jeans</a></li>
<li><a class="dropdown-item" href="../paginas/productos/vestidos.html">Vestidos</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../paginas/preguntas-frecuentes.html">Preguntas Frecuentes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../paginas/contacto.html">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<form id="formulario">
<input type="text" placeholder="Nombre y Apellido">
<input type="text" placeholder="Email">
<input type="text" placeholder="Teléfono">
<input type="submit" value="Enviar">
</form>
</main>
<footer>
<div class="p-3 mb-2 bg-secondary text-white">
<p>aqui ira el pie de pagina</p>
</div>
</footer>
<!--link JS bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>