title: Can't add an event to a button
body: <p>I am working on this Windows 8 test application and I'm using the grid app template. In the itemDetail.html I have the following HTML code (I removed all the other code in that div and added this button, the rest of the html is untouched):</p>
  <pre><code>&lt;div class=&quot;item-info&quot;&gt;
       &lt;button id=&quot;menuLink&quot;&gt;Get me the menu&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I added the following JS code in the ready member of the Pages.define function in itemDetail.js:</p>
  <pre><code>var menuButton = document.getElementById(&quot;menuLink&quot;);
  menuButton.setAttribute(&quot;onclick&quot;, &quot;menuButtonClickHandler()&quot;);
  </code></pre>
  <p>The <code>menuButtonClickHandler()</code> function is declared right after the Pages.define function with the following code:</p>
  <pre><code>function menuButtonClickHandler() {
      var messageDialog = new Windows.UI.Popups.MessageDialog(&quot;Here's your menu&quot;);
      }
  </code></pre>
  <p>When I click the button I get the following exception:</p>
  <blockquote>
  <p>0x800a1391 - JavaScript runtime error: 'menuButtonClickHandler' is undefined</p>
  </blockquote>
  <p>Where am I suppose to 'define' this function? the template is using every other code from the JS file where that function already is so the function should be available to it.</p>
  <p>Also for some strange reason I can't even add the event if I use <code>addEventListener</code>:</p>
  <pre><code>menuButton.addEventListener(&quot;click&quot;, buttonClickHandler, false);
  </code></pre>