title: Cannot Access Javascript API for Office from within a <script> in a Dialog
body: <p>What follows is the HTML file that is passed to <strong>displayDialogAsync</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
  4  See LICENSE in the project root for license information --&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. --&gt;
    &lt;link rel="stylesheet" href="Content/fabric.min.css"&gt;
    &lt;link rel="stylesheet" href="Content/fabric.components.min.css"&gt;
    &lt;script&gt;
      Office.initialize = function(reason) {
  
  
        write();
  
  
      }
  
      function write() {
  
        // If I uncomment the line below, the text in the dialog box will NOT be updated            
        //var email = Office.context.mailbox.item.sender.emailAddress;
  
        $("#firstName").text("John");
        $("#lastName").text("Doe");
        $("#gender").text("Male");
        $("#knownas").text("John Doe");
        $("#citizenship").text("Antarctica");
        $("#language").text("Esperanto");
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight"&gt;
      &lt;div class="ms-Grid-row"&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="firstName"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="lastName"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="gender"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ms-Grid-row"&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="knownas"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="citizenship"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class="ms-Grid-col"&gt;&lt;span id="language"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Whenever I try to use anything from the Office JavaScript API I notice that my Dialog Box shows up blank.  </p>
  
  <p>In the sample, all I'm doing is assigning a value to a variable and the rest of the code stops working.  No error messages appear on the console.  </p>