Uncaught TypeError: Cannot read property ‘style’ of null que no puedo solucionar

publicado por: Anonymous

dispongo de un popup en mi web que se debe registrarse como coockie y de hecho lo hace. El problema es que le tengo añadido al final una variable if que debe detectar si el coockie no esta registrado y dejar el popup abierto y en caso contrario, cerrarlo. Pero en la ultima linea recibo elo fallo que aparece en el titulo. Esta es la linea que falla:

if (!getCookie('Popup')) {
  document.getElementById("pop-up").style.display = "block";
}

Os dejo a continuación el código completo:

_x000D_

_x000D_

function accepted() {_x000D_
    setCookie('Popup', true, 1);_x000D_
    document.getElementById("pop-up").style.display = "none";_x000D_
}_x000D_
_x000D_
function setCookie(cname, cvalue, exdays) {_x000D_
    var d = new Date();_x000D_
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));_x000D_
    var expires = "expires=" + d.toUTCString();_x000D_
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";_x000D_
}_x000D_
_x000D_
function getCookie(cname) {_x000D_
    var name = cname + "=";_x000D_
    var ca = document.cookie.split(';');_x000D_
    for(var i = 0; i < ca.length; i++) {_x000D_
        var c = ca[i];_x000D_
        while (c.charAt(0) == ' ') {_x000D_
            c = c.substring(1);_x000D_
        }_x000D_
        if (c.indexOf(name) == 0) {_x000D_
            return c.substring(name.length, c.length);_x000D_
        }_x000D_
    }_x000D_
    return "";_x000D_
}_x000D_
_x000D_
if (!getCookie('Popup')) {_x000D_
    document.getElementById("pop-up").style.display = "block";_x000D_
}

_x000D_

        .popup {_x000D_
                padding: 4em;_x000D_
                top: 0;_x000D_
                position: fixed;_x000D_
                width: 100%;_x000D_
                background-color: white;_x000D_
                z-index: 999;_x000D_
            }_x000D_
_x000D_
            .popup p, .popup span {_x000D_
                color: black;_x000D_
            }_x000D_
_x000D_
            .popup .close {_x000D_
                background-color: transparent;_x000D_
                box-shadow: none;_x000D_
                border: 3px solid black;_x000D_
                border-color: black;_x000D_
                padding: 10px 20px;_x000D_
                left: 50%;_x000D_
                font-size: 12px;_x000D_
                line-height: 13px;_x000D_
                text-transform: uppercase;_x000D_
                font-weight: 900;_x000D_
                cursor: pointer;_x000D_
            }_x000D_
_x000D_
            .popup .close:hover {_x000D_
                text-decoration: none;_x000D_
                color: white;_x000D_
                background-color: black ;_x000D_
                cursor: pointer;_x000D_
            }

_x000D_

   <div id="pop-up" class="popup" >_x000D_
            <p>testtesttesttesttesttesttesttesttest<p>_x000D_
            <button id="accept-cookie" class="close" onclick="accepted()">close</button>_x000D_
        </div>

_x000D_

_x000D_

_x000D_

Alguien sabria como ayudarme con este problema?,
gracias y un saludo

P.D: Este mismo codigo lo tengo implementado en otra web, y funciona perfectamente.

solución

El problema es que se esta ejecutando el script antes de que se termine de renderizar el DOM (y por ende el div con id “pop-up” aun no existe).

Una manera de solucionarlo es con el “DOMContentLoaded”, que se encarga de ejecutar todo el código javascript dentro de su función una vez renderizado el DOM.

document.addEventListener("DOMContentLoaded", function () { 
   if (!getCookie('Popup')) { 
      document.getElementById("pop-up").style.display = "block"; 
   } 
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *