Explain please why doesnt work .className property?

Question

DOM-structure in .html Theres .js and bootstr containers for making stylish gallery.

  <script src="main.js"></script>            
    <div class="container-fluid" id="gal">
        <div class="row">
            <div class="col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 col-xs-12">
                <div class="container-fluid galbody" id="gallery3">
                    <h2 id="galhead">Gallery</h2>
                    <div id="col1"> 

                    </div>
                    <div id="col2"> 

                    </div>
                    <div id="col3"> 

                    </div>
                </div>
                <div class="container-fluid galbody" id="gallery2">
                    <div id="col1">

                    </div>
                    <div id="col2">

                    </div>
                </div>
                <div class="container-fluid galbody" id="gallery1">
                    <div id="col1">

                    </div>
                </div>    
            </div>
        </div>
    </div>

Im trying to insert within .js functions and methods images that are in array arr[] urls. there is an main.js code:

 document.write("hey!");



//definin' width of browser workspace
var galdiv3 = document.getElementById("gallery3").className = "none";
var galdiv2 = document.getElementById("gallery2").className = "none";
var galdiv1 = document.getElementById("gallery1").className = "none";
//creating array of future gallerydir images paths list
var arr = [];
//creating async flow for read json with paths. after calling back func for parse read text as array list in array (arr)
fs.readFile("gallist.json", function cb(err,rd){
    var imgList = JSON.parse(rd);
    imgList.forEach(function(file) {
        arr += file + ", ";
    }, this);
    console.log(arr);
});



function singleGrid()
{
    galdiv1.removeAttribute(className = " none");
    function imgFill(){
        for (var file in arr){
            var x = document.createElement("div");
            x.className();
        }
    }
    imgFill();
}
singleGrid();

Problem is there :

var galdiv3 = document.getElementById("gallery3")**.className = "none"**;
var galdiv2 = document.getElementById("gallery2")**.className = "none"**;
var galdiv1 = document.getElementById("gallery1")**.className = "none"**;

Console throws err "Uncaught TypeError: Cannot set property 'className' of null"

[Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Nov 08 '17 at 12:33
document.getElementById('gallery3').style.display = 'none'; try this — Shafiqul Islam, Nov 08 '17 at 12:35

FrontTheMachine · Accepted Answer · 2017-11-08T12:49:28.793

you're trying to access DOM element before they've been inserted into the page.

so in the expression

var galdiv3 = document.getElementById("gallery3").className = "none";

the expression document.getElementById("gallery3") returns null. as consequence: null.className throws the error.

this happens because the <script></script> tag executes his content in the moment it's added to the page, that is, during the loading of the page, before the other tags are added. For this, when the script is executed, there are no other elements in the page so that you cannot find them.

move the <script src="main.js"></script> to the bottom or simply put all the code inside the window.onload event.

Explain please why doesnt work .className property?

1 Answers1