3

Tengo problemas con mi código: el código html es de un formulario, pero el botón es lo único visible, y el formulario aparece al darle click al botón, pero al darle click nunca sale y no pasa nada.
Alguien puede ayudarme por favor...

        <button class="signUp btn">Contactanos</button>

        <div class="form-modal">
            <div class="content-wrapper">
                <div class="close"> + </div>
                <img src="img/profile.jpg" alt="">
                <form action="enviar.php" method="POST">
                    <input type="text" name="nombre" placeholder="Nombre">
                    <input type="email" name="email" placeholder="Correo">
                    <input type="text" name="telefono" placeholder="Telefono">
                    <textarea name="mensaje" id="mensaje" placeholder="mensaje"></textarea>
                    <button class="submit btn">Enviar</button>
                </form>
            </div>
        </div>
    </div>

Y estos son los scripts que no me funcionan

const singUp = document.querySelector(".signUp");
const modal = document.querySelector(".form-modal");
const close = document.querySelector(".close");

singUp.addEventListener("click", ()=>{
    modal.style.display = "flex";
})

close.addEventListener("click", ()=>{
    modal.style.display = "none";
})
5
  • Yo lo probe y funciona, es decir, al hacer clic en el botón, aparece el formulario y al hacer clic en "cerrar" desaparece. ¿Que error te muestra en consola o en pantalla?. Saludos. Commented el 11 sept. 2020 a las 20:00
  • por lo que entendi no te estaria funcionando el boton de enviar, creo q es por que no estas llamando a la clase btn y falta el atributo type="submit", fijate si funciona asi!
    – computer
    Commented el 11 sept. 2020 a las 20:03
  • Hola, En la consola del navegador solo me dice: "no even listeners" Commented el 11 sept. 2020 a las 20:09
  • 1
    Seguramente tienes el código javascript arriba, antes de crear los elementos HTML. Colócalo hasta abajo, antes de </body> y ya no deberías tener problemas.
    – Triby
    Commented el 11 sept. 2020 a las 21:28
  • 1
    Hola @DavidTorres. Lo puedes hacer como dice Triby o también agregando el atributo defer o async si lo colocas entre las etiquetas <head></head>para que se cargue de forma diferida o asíncrona y así no tendrás problemas. Lo probé y todo el código está bien. Commented el 12 sept. 2020 a las 8:33

2 respuestas 2

0

El error que presentas en tus comentarios se debe a cómo llamas los scripts. Dado que no es una función, sino, que estás añadiendo oyentes y variables en el cuerpo, es posible que estés intentando acceder a una etiqueta que aún no existe.

Si el script está siendo llamado en el < Head > este error es común, deberías mover tus < script > después del < Body >. Eso arreglaría en parte el problema que comunicas, el resto parece estar muy normal.

La razón es:

const singUp = document.querySelector(".signUp"); // undefined
const modal = document.querySelector(".form-modal"); // undefined
const close = document.querySelector(".close"); // undefined

No existen tales etiquetas, en el momento en que son llamadas.

Si buscas un código con solución directa, este es. (En inglés).

1
  • Tu respuesta es muy interesante, sería conveniente que agregues el código y explicación traducida directamente en lugar del enlace para que sea una solución completa.
    – Triby
    Commented el 12 sept. 2020 a las 19:04
0

Parece ser que lo que no te esta funcionando es debido al orden de carga de tus scripts.

El orden en el que vas a cargar tus scripts es importante, si colocas tu script en el tag Head comenzaran a cargar antes y puede darte problemas si lo que estas llamando se encuentra en el tag Body.

Para solucionar esto tienes varias opciones, tanto colocar el script al final del tag Body lo cual no esta mal, pero no es lo mas recomendado para una mejor optimización de carga. Yo te recomendaría añadir el atributo defer en tu script.

Un ejemplo de como añadir el atributo defer a tu script:

<script src="assets/scripts/app.js" defer></script>

Esto hará que el navegador "entienda" que debe descargar el script en el orden en que esta colocado (tag "HEAD" en este caso), pero que debe cargar este script después de acabar de cargar el código html.

Aquí tienes documentación sobre los atributos de Javascript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.