¿De qué manera elimino o desactivo el evento click del botón para que inicie otra función y así sumar otro párrafo y la variable "products" se muestre de manera adecuada? ¿Por qué al iterar el array arroja undefined? ¿por qué no me guarda la info correctamente en el local storage?
let button = document.getElementById("button");
let title = document.getElementById("title");
let paragraph = document.getElementById("paragraph");
button.addEventListener("click", startForm);
function startForm() {
title.textContent = "Elige el producto que buscas.";
paragraph.textContent = "Ingrese su nombre";
let input = document.createElement("input");
input.setAttribute('type', 'text');
input.idName = "inputOne";
let name = input.value;
localStorage.setItem("Name", name);
let container = document.getElementById("mainContent");
container.appendChild(input);
button.textContent = "Siguiente";
let newDiv = document.createElement("div");
container.appendChild(newDiv);
for(product of products) {
newDiv.innerHTML += `
<p>Tipo: ${products.name}</p>
`
}
}
var products = [
{
id: 1,
name: "Remeras",
},
{
id: 2,
name: "Leggins",
},
{
id: 3,
name: "Buzos",
}
]
<!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">
<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=Comfortaa:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<title>Cotizador</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="firstContainer" id="firstContainer">
<div id="mainContent">
<img src="img/indumentaria.png" alt="indumentaria">
<h1 id="title">
Indumentaria deportiva de alta calidad
</h1>
<p id="paragraph">
Ingresá las características del producto que estás buscando, conocé su precio y confirmá tu pedido.
</p>
</div>
<button id="button">Comenzar</button>
</div>
</main>
<footer>
<p>
Devjogger.
</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
<p>Tipo: ${products.name}</p>
con una s y debería ser<p>Tipo: ${product.name}</p>
. Puedes eliminar el evento simplemente con removeEventListener().