title: JS - Cannot read property 'setAttribute' of null
body: <p>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</p>
  
  <p>I always get the "Cannot read property 'setAttribute' of null " Error!</p>
  
  <p>Please Help!
  Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (window.innerWidth &lt; 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%");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;example&lt;/title&gt;
      
      &lt;!-- css --&gt;
      &lt;link type="text/css" rel="stylesheet" href="style.css"&gt;
      
      &lt;!-- fonts --&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,100,300' rel='stylesheet' type='text/css'&gt;
      
      &lt;!-- javascripts --&gt;
      &lt;script language="javascript" type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      
  &lt;/head&gt; 
  &lt;body&gt;
      &lt;header&gt;
          &lt;div id="headerLeft"&gt;
              &lt;p class="headerTitle"&gt;example&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div id="headerRight"&gt;
              &lt;p class="headerTitle"&gt;example&lt;/p&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      
      &lt;nav&gt;
      &lt;/nav&gt;
      
      &lt;main&gt;
      &lt;/main&gt;
      
      &lt;footer&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>