JS - Cannot read property 'setAttribute' of null
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>Answer
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.