Menu
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>
663
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.
147
At first do selection by Id without '#'. The second is to set style in such way:
document.getElementById('').style.width = "20%";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
