El problema está en que no sé cómo detener las acciones del botón, cuando el usuario pulse "siguiente", deje de agregar inputs y poder agregarle otras acciones... como por ejemplo sumarle otra función. Tomé en cuenta la opción de preventDefault pero no detiene el agregado de inputs, pues si esto no ocurre, ¿Cómo sigo sumando acciones luego de que la persona agregué su nombre? ¿Hago otra función y se la asigno al botón? No tengo clara la respuesta...
let title = document.getElementById("title");
let paragraph = document.getElementById("paragraph");
let container = document.getElementById("mainContent");
button.addEventListener("click", startForm);
function startForm() {
title.textContent = "Elige el producto que buscas.";
paragraph.textContent = "¿Cuál es tu nombre?";
let input = document.createElement("input");
input.setAttribute('type', 'text');
let name = input.value;
localStorage.setItem("Name", name);
container.appendChild(input);
button.textContent = "Siguiente";
button.preventDefault();
}
<!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="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="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>