JS - Cannot read property 'setAttribute' of null

Question

I am pretty new to javascript and want to code a header of an html site. JS: when the window width is smaller than 1215px --> left part goes 100% width; right part of the header to 0

I always get the "Cannot read property 'setAttribute' of null " Error!

Please Help! Code:

if (window.innerWidth < 1215) {
    document.getElementById("#headerLeft").setAttribute("style", "width:100%");
    document.getElementById("#headerRight").setAttribute("style", "width:0%");
} else {
    document.getElementById("#headerLeft").setAttribute("style", "width:50%");
    document.getElementById("#headerRight").setAttribute("style", "width:50%");
}

body {
    margin:0;
}

header{
    height:100px;
    width:100%;
}

#headerLeft {
    background-color:#FF7043;
    height:100px;
    float:left;
}

#headerRight {
    background-color:#FFFFFF;
    height:100px;
    float:right;
}

.headerTitle {
    font-family:'Roboto', sans-serif;
    margin:15px;
    font-size:70px;
}

#headerRight .headerTitle {
    text-align:left;
    color:#FF7043;
    font-weight:300;
}

#headerLeft .headerTitle {
    text-align:center;
    color:#FFFFFF;
    font-weight:900;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example</title>
    
    <!-- css -->
    <link type="text/css" rel="stylesheet" href="style.css">
    
    <!-- fonts -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,100,300' rel='stylesheet' type='text/css'>
    
    <!-- javascripts -->
    <script language="javascript" type="text/javascript" src="script.js"></script>
    
</head> 
<body>
    <header>
        <div id="headerLeft">
            <p class="headerTitle">example</p>
        </div>
        
        <div id="headerRight">
            <p class="headerTitle">example</p>
        </div>
    </header>
    
    <nav>
    </nav>
    
    <main>
    </main>
    
    <footer>
    </footer>
</body>
</html>

Not an answer to your question, but you may want to take a look at [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) — James Thorpe, Jan 15 '16 at 19:57

mynameiscoffey · Accepted Answer · 2016-01-15T20:02:32.540

16

It is because all of your calls to document.getElementById are failing to find anything since there aren't any elements with those IDs. Looks like jQuery habits in play, remove the # from your IDs.

edited Jan 15 '16 at 20:02

answered Jan 15 '16 at 19:58

mynameiscoffey

15,244
5
33
45

1

It looks like it's also running too soon... – James Thorpe Jan 15 '16 at 19:59
4

Yep, the script should be included ad _bottom_ of the page, not in the head. Or it should be wrapped in an eventListener for the `window.load` event. – Gian Marco Toso Jan 15 '16 at 20:00

score 3 · Answer 2 · answered Jan 15 '16 at 20:05

3

At first do selection by Id without '#'. The second is to set style in such way:

document.getElementById('').style.width = "20%";

answered Jan 15 '16 at 20:05

Dmytro

345
7
14

this is javascript, the same as $('#myVar')... in jQuery. Or isn't it? – Dgloria Apr 12 '22 at 12:37
In terms of searching they are equal because trying to find same tag by `id=myVar` but `getElementById` is designed to find a tag only by `id` and muc faster. jQuery search by `$()` is closer to `querySelector` which accept any kind of selector as `.className|span|#id_of_the_tag` – Dmytro Apr 27 '22 at 14:41

JS - Cannot read property 'setAttribute' of null

2 Answers2