title: Javascript: Uncaught TypeError: not a function
body: <p>I'm building a website which utilises the following code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div onclick="linkPopup()"&gt;&lt;/div&gt;
  &lt;button type="button" id="hidePopup" onclick="hidePopup()"&gt;Cancel&lt;/button&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>function linkPopup(questionNumber) {
          document.getElementById('linkPopup').style.display = 'block';
          document.getElementById('addLink').setAttribute('onclick', 'addLink(' + questionNumber + ')');
      }
  
      function hidePopup() {
          document.getElementById('linkPopup').style.display = 'none';
          document.getElementById('overlay').style.display = 'none';
      }
  </code></pre>
  
  <p>For some reason I get the following error in Chrome's developer tools:</p>
  
  <blockquote>
    <p>Uncaught TypeError: hidePopup is not a function</p>
  </blockquote>
  
  <p>What is the route of this issue and how can I prevent this from happening in the future?</p>