document.getElementById does not assign the id to the variable and it is null

Question

document.getElementById does not assign the id to the variable and it is null

Navigation

#1 by (3 votes)

3

I'm doing a modal with the following 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>

And javascript gives me an error in modalBtn.addEventListener('click', openModal);

The calling function seems to be fine and I can not find any syntax error. I do not understand why it does not assign the id to var = modalBtn=document.getElementById('btnModal'); since there is the error

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

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

javascript html

asked by NumaX 13.12.2018 в 10:56

source

1 answer

Query about PHPMAILER difference between object.property vs. object [property]

score 3 · Answer 1

It may be because the JS function is being declared or called before the DOM has been fully loaded.

DOM W3C

DOM MDN

Functional

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

Non-functional

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

In this second example we have defined the script ahead of the DOM element, when this happens, the events do not have access to DOM elements that have not yet been created.

This can also be avoided by using 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>

In this case we have defined the script before, but thanks to the function ready () the script has not been executed until the DOM of the document has not been loaded completely.

Edit

To make the function of the close button work correctly, it would be exactly the same:

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

I hope it will be helpful, greetings !!