al dar a siguiente en el formulario, recarga la pagina, y en el segundo click ya funciona, siempre se comporta asi igual. Aca veo que no funciona, pero en el navegador tiene el comportamiento que describo mas arriba. Agradezco de antemano. Buenas, no encuentro la falla, al dar a siguiente en el formulario, recarga la pagina, y en el segundo click ya funciona, siempre se comporta asi igual. Aca veo que no funciona, pero en el navegador tiene el comportamiento que describo mas arriba. Agradezco de antemano.
const movPag = document.querySelector(".movPag");
const pagina = document.querySelector(".pagina");
const pagina2 = document.querySelector(".pagina2");
const pagina3 = document.querySelector(".pagina3");
const BotonAvance1 = document.querySelector(".avanzarpag1");
const BotonVolver0 = document.querySelector(".retrocederpag0");
const BotonVolver1 = document.querySelector(".retrocederpag1");
const BotonAvance2 = document.querySelector(".avanzarpag2");
BotonAvance1.addEventListener("click", function () {
movPag.style.display = "none";
pagina2.style.display = "block";
});
BotonAvance2.addEventListener("click", function () {
let nombreEmpresa = document.getElementById("nombreEmpresa").textContent;
let fechaEntrega = document.getElementById("fechaEntrega").textContent;
let nombreyapellido = document.getElementById("nombreyapellido").textContent;
let mail = document.getElementById("email").textContent;
movPag.style.display = "none";
pagina.style.display = "none";
pagina2.style.display = "none";
pagina3.style.display = "block";
document.querySelector(".span1").innerHTML = nombreEmpresa;
document.querySelector(".span2").innerHTML = fechaEntrega;
document.querySelector(".span3").innerHTML = nombreyapellido;
document.querySelector(".span4").innerHTML = mail;
});
BotonVolver0.addEventListener("click", function () {
pagina2.style.display = "none";
movPag.style.display = "block";
});
BotonVolver1.addEventListener("click", function () {
pagina2.style.display = "block";
pagina3.style.display = "none";
});
.container {
text-align: center;
margin: auto;
width: 30%;
background: linear-gradient(30deg, var(--color-violeta) 0%, var(--color-azul) 48.96%, var(--color-verde) 100%);
text-align: center;
border-radius: 20px;
padding: 2rem;
margin-top: 2rem;
}
form{
margin-top: 2rem;
}
.pagina2 {
display: none;
}
.pagina3 {
display: none;
}
/* BOTONES */
.botonSiguiente{
background: var(--color-verde);
}
.botonAnterior{
background: none;
border: 1px var(--color-verde) solid;
}
.botonAnterior a{
color: var(--color-grisclaro);
}
/* FORMULARIO */
.subtitulo{
font-size: 2rem;
color: var(--color-background);
}
.campo{
padding: 1rem;
}
.campo input{
height: 24px;
border: 1px black solid;
}
.campo select{
height: 28px;
width: 100%;
padding-right: 1rem;
}
.inputsFormulario{
width: 92%;
border-radius: 20px;
padding-left: 1rem;
padding-right: 1rem;
margin-top: 0.5rem;
}
@media (max-width: 1200px) {
.container{
width: 50%;
}
}
@media (max-width: 768px) {
.container{
width: 96%;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Asistente </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
</head>
<body>
<div class="container">
<h1>Solicitud de presupuesto</h1>
<div class="formulario-principal">
<form action="#" name="wizard">
<!-- Página 1 -->
<div class="pagina movPag">
<h2 class="subtitulo">Información básica</h2>
<div class="campo">
<label>Nombre de su empresa</label>
<input type="text" id="nombreEmpresa" class="inputsFormulario" />
</div>
<div class="campo">
<label>Fecha de entrega aproximada</label>
<input type="date" id="fechaEntrega" class="inputsFormulario" />
</div>
<div class="campo">
<button class="boton botonAnterior">
<a href="../index.html">Volver a Home</a>
</button>
<button class="avanzarpag1 siguiente boton botonSiguiente">
Siguiente
</button>
</div>
</div>
<!-- Página 2 -->
<div class="pagina pagina2">
<h2 class="subtitulo">Informacion de contacto</h2>
<div class="campo">
<label>Nombre y apellido</label>
<input type="text" id="nombreyapellido" class="inputsFormulario" />
</div>
<div class="campo">
<label>E-mail</label>
<input type="text" id="email" class="inputsFormulario" />
</div>
<div class="campo">
<button class="retrocederpag0 anterior boton botonAnterior">
Anterior
</button>
<button class="avanzarpag2 siguiente boton botonSiguiente">
Siguiente
</button>
</div>
</div>
<div class="pagina pagina3">
<h2 class="subtitulo">Gracias, Nos contactaremos a la bravedad</h2>
<h3>Resumen</h3>
<br><br>
<span class="span1"></span>
<br><br>
<span class="span2"></span>
<br><br>
<span class="span3"></span>
<br><br>
<span class="span4"></span>
<br><br>
<button class="retrocederpag1 anterior boton botonAnterior">Anterior</button>
<button class="boton botonAnterior">
<a href="../index.html">Cerrar</a>
</button>
<button class="boton" onclick="crearPdf()">Crear PDF</button>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>