AnswerBun.com

Event Listeners no funcionan, ¿por qué?

Stack Overflow en español Asked by David Torres on December 14, 2020

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";
})

One Answer

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).

Answered by Diego Andrés on December 14, 2020

Add your own answers!

Related Questions

Saber el tipo de datos de un campo de una tabla FireBird

1  Asked on November 7, 2021 by fernando-de-jesus-basurto

   

Crear un Archivo PDF de un Byte Array?

2  Asked on November 7, 2021 by mark-dev

     

Activar Select Box segun checkbox seleccionado

2  Asked on November 7, 2021 by maha1982

       

Usar entity framework con Base de datos existente

1  Asked on November 7, 2021 by miquel

   

hctreemap2 de dos niveles –> Error: Can’t subset columns that don’t exist

1  Asked on November 7, 2021 by alejandro-erazo-bolaos

     

Problema con controllers de MVC .NET

0  Asked on November 7, 2021 by jorge-gonzales

         

como mover botones de ruta en la pagina angular 8/9

1  Asked on November 7, 2021 by kenny-cifuentes

       

Consulta múltiples tablas con laravel eloquent

1  Asked on November 4, 2021 by erain-moya

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP