title: Uncaught TypeError: Cannot read property 'getAttribute' of null
body: <p>I just started learning JavaScript. I just want to build an image carousel but I get an error at my first line:</p>
  
  <pre>
  Uncaught TypeError: Cannot read property 'getAttribute' of null
  </pre>
  
  <p>js:</p>
  
  <pre><code>function changeImage(){
      var imageSrc=document.getElementById("image").getAttribute("src");
  }
  changeImage();
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="hello.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="button_left"&gt;
          &lt;img id ="left" src="left.png"&gt;
      &lt;/div&gt;
      &lt;div id="button_right"&gt;
          &lt;img id ="right" src="right.png"&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;img id ="image" src="1.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>