3

Estoy haciendo un modal con el siguiente html

<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
        <div id="simpleModal" class="modal">
          <div class="modal-content">
            <span id="closeBtn">&times;</span> <!--probe con class="closeBtn" y no anduvo en el js-->
              <h2>Modal h2 header</h2>
          </div>
          <div class="modal-body">
            <p> hola soy un modal</p>
            <p>pueden ir las fotos</p>
           </div>
           <div class="modal-footer">
             <h3>modal footer</h3>
            </div>
        </div>

Y el javascript me da un error en modalBtn.addEventListener('click', openModal);

La función que llama parece estar bien y no encuentro ningún error de sintaxis. No comprendo porque no asigna el id a var = modalBtn=document.getElementById('btnModal'); ya que ahí esta el error

var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('btnModal');

modalBtn.addEventListener('click', openModal);
function openModal(){
  modal.style.display = 'block';
}
3
  • ¿Qué error te da? ¿El javascript lo tienes puesto en el mismo archivo que el html? Puede que el error esté porque llamas primero al javascript, antes de que se cree el DOM, y no encuentra los elementos con ese id.
    – Rabegi
    Commented el 13 dic. 2018 a las 10:03
  • ¿Tienes la etiqueta <script> antes de ese HTML? Commented el 13 dic. 2018 a las 10:09
  • Copie tu codigo tal cual y funciona a la perfección. Estás cometiendo algun error que obviaste en la descripcion del problema.
    – ZottoSL
    Commented el 14 dic. 2018 a las 20:21

1 respuesta 1

3

Puede ser debido a que la función JS está siendo declarada o llamada antes de que el DOM haya sigo cargado completamente.

DOM W3C

DOM MDN


Funcional

<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
    <div class="modal-content">
    <span id="closeBtn">&times;</span> <!--probe con class="closeBtn" y no anduvo en el js-->
        <h2>Modal h2 header</h2>
    </div>
    <div class="modal-body">
    <p> hola soy un modal</p>
    <p>pueden ir las fotos</p>
    </div>
    <div class="modal-footer">
        <h3>modal footer</h3>
    </div>
</div>

<script>
    var modal = document.getElementById('simpleModal');
    var modalBtn = document.getElementById('btnModal');

    console.log(modal)
    console.log(modalBtn)

    modalBtn.addEventListener('click', openModal);
    function openModal(){
        modal.style.display = 'block';
    }
</script>


No funcional

<script>
    var modal = document.getElementById('simpleModal');
    var modalBtn = document.getElementById('btnModal');

    console.log(modal)
    console.log(modalBtn)

    modalBtn.addEventListener('click', openModal);
    function openModal(){
        modal.style.display = 'block';
    }
</script>

<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
    <div class="modal-content">
    <span id="closeBtn">&times;</span> <!--probe con class="closeBtn" y no anduvo en el js-->
        <h2>Modal h2 header</h2>
    </div>
    <div class="modal-body">
    <p> hola soy un modal</p>
    <p>pueden ir las fotos</p>
    </div>
    <div class="modal-footer">
        <h3>modal footer</h3>
    </div>
</div>

En este segundo ejemplo hemos definido el script por delante del elemento DOM, al ocurrir esto, los eventos no tiene acceso a elementos del DOM que todavía no han sido creados.

Esto también se puede evitar con el uso de jQuery.ready()


jQuery: $(document).ready( handler )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(() => {
        var modal = document.getElementById('simpleModal');
        var modalBtn = document.getElementById('btnModal');

        console.log(modal)
        console.log(modalBtn)

        modalBtn.addEventListener('click', openModal);
        function openModal(){
            modal.style.display = 'block';
        }
    })
    
</script>

<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
    <div class="modal-content">
    <span id="closeBtn">&times;</span> <!--probe con class="closeBtn" y no anduvo en el js-->
        <h2>Modal h2 header</h2>
    </div>
    <div class="modal-body">
    <p> hola soy un modal</p>
    <p>pueden ir las fotos</p>
    </div>
    <div class="modal-footer">
        <h3>modal footer</h3>
    </div>
</div>

En este caso hemos definido el script antes, pero gracias a la función ready() el script no se ha ejecutado hasta que el DOM del documento no ha sido cargado por completo.

Edito

Para hacer que la función del botón de cerrar funcione correctamente sería exactamente igual:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    // Esperamos a que el DOM se haya cargado
    $(document).ready(() => {

        // Declaramos las variables de todos los elementos del Dom
        var modal = document.getElementById('simpleModal');
        var modalBtn = document.getElementById('btnModal');
        var closeBtn = document.getElementById('closeBtn')

        // Comprobamos que las variables se han creado correctamente
        console.log(modal)
        console.log(modalBtn)
        console.log(closeBtn)

        // Acoplamos el evento addEventListener() a cada botón con la función que queremos que desarrollen
        modalBtn.addEventListener('click', openModal);
        closeBtn.addEventListener('click', closeModal);

        // Definimos la función que abre el modal
        function openModal(){
            console.log('Mostrar modal')
            modal.style.display = 'block';
        }

        // Definimos la función que cierra el modal
        function closeModal(){
            console.log('Cerrar modal')
            modal.style.display = 'none';
        }
    })
    
</script>

<button id="btnModal">Ver</button>
<div id="simpleModal" class="modal" style="display: none">
    <div class="modal-content">
    <button id="closeBtn">&times;</button>
        <h2>Modal h2 header</h2>
    </div>
    <div class="modal-body">
    <p> hola soy un modal</p>
    <p>pueden ir las fotos</p>
    </div>
    <div class="modal-footer">
        <h3>modal footer</h3>
    </div>
</div>

Espero te sea de ayuda, un saludo!!

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.