ul is not defined at Htmldocument

Question

I am using the code below but getting an error

function readyDom(callback) {
    if (/^(interactive|complete)$/i.test(document.readyState)) {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}
readyDom(function() {
    var navbar = document.createElement("style");
        ul.innerHTML = 'body { margin: 0; } ul.spot-nav { list-style-type: none; font-family: Verdana; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li.spot-li { float: left; } li.spot-li a.spot-a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }';
    document.head.appendChild(navbar);
});
readyDom(function() {
    var segundos = 1;
    setTimeout(function() {
        var ul = document.createElement("ul");
        ul.className = "spot-nav";
        ul.innerHTML = '<li class="spot-li">' +
                          '<a class="spot-a" href="https://grupospotlight.com" target="_blank"><img src="http://www.grupospotlight.com/assets/img/logo-nav-inverse.png" draggable="false" width="100"></a>' +
                          '</li>' +
                          '<li class="spot-li" style="float: right; padding-top: 3px;">' +
                          '<a class="spot-a" href="https://grupospotlight.com" target="_blank">WWW.GRUPOSPOTLIGHT.COM</a>' +
                          '</li>';
        document.body.insertBefore(ul, document.body.firstChild);
    }, 1000 * segundos);
});

Answer 1

I believe the problem is here:

readyDom(function() {
    var navbar = document.createElement("style");
        ====>>> ul.innerHTML = 'body { margin: 0; } ul.spot-nav { list-style-type: none; font-family: Verdana; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li.spot-li { float: left; } li.spot-li a.spot-a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }';
    document.head.appendChild(navbar);
});

you are trying to access this variable ul that was not declared in the function. you stated in the third function that posted above.

try to merge the two functions into one. this should solve your problem.

Answer 2

Mute ul.innerHTML = 'body... for navbar.innerHTML = 'body....

ul is not accessible in the scope of that anonymous function, and at the bottom you want to add that CSS to the element style (navbar) that you will add to the right page?

function readyDom(callback) {
    if (/^(interactive|complete)$/i.test(document.readyState)) {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}
readyDom(function() {
    var navbar = document.createElement("style");
    navbar.innerHTML = 'body { margin: 0; } ul.spot-nav { list-style-type: none; font-family: Verdana; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li.spot-li { float: left; } li.spot-li a.spot-a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }';
    document.head.appendChild(navbar);
});
readyDom(function() {
    var segundos = 1;
    setTimeout(function() {
        var ul = document.createElement("ul");
        ul.className = "spot-nav";
        ul.innerHTML = '<li class="spot-li">' +
            '<a class="spot-a" href="https://grupospotlight.com" target="_blank"><img src="http://www.grupospotlight.com/assets/img/logo-nav-inverse.png" draggable="false" width="100"></a>' +
            '</li>' +
            '<li class="spot-li" style="float: right; padding-top: 3px;">' +
            '<a class="spot-a" href="https://grupospotlight.com" target="_blank">WWW.GRUPOSPOTLIGHT.COM</a>' +
            '</li>';
        document.body.insertBefore(ul, document.body.firstChild);
    }, 1000 * segundos);
});