can you guys help me with the order for the dom?

Question

I have a problem with undefined property I added the first part of my js I have a document.readystate witch suppose to help with the Dom not reading fills but I still get undefined

 if (document.readyState == `loading`) { document.addEventListener(`DOMContentLoaded`, ready); } else { ready } function ready() { var hiddentwo = document.getElementById(`sectiontop`) var hidden = document.getElementById(`sectionone`) var hiddentwo = document.getElementById(`sectiontop`) console.log(hiddentwo) const openModal = function() { hidden.classList.remove(`hidesection`); }; const closeModal = function() { hidden.classList.add('hidden'); }; const closeModal1 = function() { hiddentwo.classlist.remove(`hidesection1`) }; const closeModal11 = function() { hiddentwo.classlist.add(`hidesection1`) }; window.onload = function() { hiddentwo.classlist.remove('hidesection1') }; };

 .hidesection1 { display: none; }

 <section id="sectiontop" class="hidesection1">

Answer 1

Remove this block in your code:

if  (document.readyState == `loading`)
    {document.addEventListener(`DOMContentLoaded`,ready);}
else{ready}

and replace it with either

document.addEventListener(`DOMContentLoaded`, ready);

or use the ready state change event (which requires checking the state inside your ready function):

document.addEventListener(`readystatechange`, ready);

// and in ready():
function ready() {
    if (document.readyState === 'interactive') {
        // your code from ready function body here
    }
};

You always use either method, never both.

Answer 2

as @Sebastian Simon and @ conexo pointed out hiddentwo.classlist.remove must be hiddentwo.classList.remove. Case matters in Javascript.