title: Call JS function for specific id in HTML
body: <p>I have below function in JS file name as <strong>hello.js</strong> inside <strong>js</strong> folder.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function hello(){
      alert('hello world !);
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/hello.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(function() {
                  $("#hello").hello();
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button type="button" id="hello"&gt;Click Me!&lt;/button&gt; 
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>How do I attach the <code>hello()</code> function to the button with the <code>id="hello"</code>? I'm doing something wrong but I can't find what.</p>
  
  <p><strong>Edit :</strong> I recommend reading all answers for completeness.</p>
  
  <p><strong>Edit2:</strong> The purpose of this question was to clarify the general method of attaching functions to specific elements on html. The button and the click interaction was an example.</p>