title: Why is the result of document.getElementById null in this case?
body: <p>I am basically new to JavaScript and WinJs stuff. Following <a href="http://msdn.microsoft.com/en-ca/library/windows/apps/hh986964.aspx" rel="nofollow">this</a> tutorial to learn it.</p>
  
  <p>My default.html is below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;HelloWorld&lt;/title&gt;
  
      &lt;!-- WinJS references --&gt;
      &lt;link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" /&gt;
      &lt;script src="//Microsoft.WinJS.1.0/js/base.js"&gt;&lt;/script&gt;
      &lt;script src="//Microsoft.WinJS.1.0/js/ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- HelloWorld references --&gt;
      &lt;link href="/css/default.css" rel="stylesheet" /&gt;
      &lt;script src="/js/default.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 class="headerClass"&gt;Hello, World!&lt;/h1&gt;
      &lt;div class="mainContent"&gt;
          &lt;p&gt;What's your name&lt;/p&gt;
          &lt;input id="nameInput" type="text" /&gt;
          &lt;button id="helloButton"&gt;Say "Hello"&lt;/button&gt;
          &lt;div id="greetingOutput" /&gt;
          &lt;label for="ratingControlDiv"&gt;
              Rate this greeting:
          &lt;/label&gt;
          &lt;div id="ratingControlDiv" data-win-control="WinJS.UI.Rating" /&gt;
          &lt;div id="ratingOutput" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My default.js is as follows</p>
  
  <pre><code>// For an introduction to the Blank template, see the following documentation:
  // http://go.microsoft.com/fwlink/?LinkId=232509
  (function () {
      "use strict";
  
      WinJS.Binding.optimizeBindingReferences = true;
  
      var app = WinJS.Application;
      var activation = Windows.ApplicationModel.Activation;
  
      app.onactivated = function (args) {
          if (args.detail.kind === activation.ActivationKind.launch) {
              if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                  // TODO: This application has been newly launched. Initialize
                  // your application here.
              } else {
                  // TODO: This application has been reactivated from suspension.
                  // Restore application state here.
              }
              args.setPromise(WinJS.UI.processAll().then(function completed() {
  
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
  
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
  
                  // Register the event handler. 
                  ratingControl.addEventListener("change", ratingChanged, false);
  
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", buttonClickHandler, false);
  
              }));
  
          }
      };
  
      app.oncheckpoint = function (args) {
          // TODO: This application is about to be suspended. Save any state
          // that needs to persist across suspensions here. You might use the
          // WinJS.Application.sessionState object, which is automatically
          // saved and restored across suspension. If you need to complete an
          // asynchronous operation before your application is suspended, call
          // args.setPromise().
      };
  
      function buttonClickHandler(eventInfo) {
          var userName = document.getElementById("nameInput").value;
          var greetingString = "Hello, " + userName + "!!!";
          document.getElementById("greetingOutput").innerText = greetingString;
  
      }
  
      function ratingChanged(eventInfo) {
  
          var ratingOutput = document.getElementById("ratingOutput");
          ratingOutput.innerText = eventInfo.detail.tentativeRating;
      }
  
      app.start();
  })();
  </code></pre>
  
  <p>I am getting ratingOutput as null in ratingChanged. Any ideas why?</p>