title: Replace Text In TextArea Using Chrome Extension - JavaScript
body: <p>I'm trying to replace the text in a TextArea with the contents of a string variable in a google chrome extension. But for some reason nothing changes in my result. Here's my code:</p>
  
  <p><strong>Content Script (js)</strong></p>
  
  <pre><code>(function () {
  
      // Holds text being selected in browser
      var lwsSelectedText = '';
  
      // Adds pop-up to current webpage
      function lwsAddContent(callback) {
  
          // Get body tag
          var body = document.getElementsByTagName('body');
  
          // add invisible div
          document.body.innerHTML += '&lt;div id="myModal" class="modal"&gt;&lt;div class="modal-content"&gt;&lt;span class="close"&gt;&amp;times;&lt;/span&gt;&lt;div id="lwsSpanishDiv"&gt;&lt;p id="lwsSpanishTitle"&gt;Spanish&lt;/p&gt;&lt;textarea id="lwsSpanishTextArea"&gt;Hello&lt;/textarea&gt;&lt;/div&gt;&lt;div id="lwsEnglishDiv"&gt;&lt;p id="lwsEnglishTitle"&gt;English&lt;/p&gt;&lt;textarea id="lwsEnglishTextArea"&gt;Hello 2&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          callback(lwsSetUpTextGetter);
  
      }
  
      // Make the pop-up visible and set up close button
      function lwsActivateContent(callback) {
  
          var modal = document.getElementById('myModal');
  
          // Get the textarea
          var txtarea = document.getElementById("myTxtArea");
  
          // Get the &lt;span&gt; element that closes the modal
          var span = document.getElementsByClassName("close")[0];
  
          span.onclick = function () {
              modal.style.display = "none";
          }
  
          callback();
  
      }
  
      // Initialize ability to select and grab text from browser
      function lwsSetUpTextGetter(callback) {
          //Set the onmouseup function to lwsGetText
          document.onmouseup = lwsGetText;
          //Handling clicking outside webpage?
          if (!document.all) document.captureEvents(Event.MOUSEUP);
  
  
      }
  
      //Gets selected text
      function lwsGetText(e) {
  
          // Get access to spanish text area
          var spanishText = document.getElementById('lwsSpanishTextArea');
  
          //Get text
          lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();
  
          //if nothing is selected, do nothing
          if (lwsSelectedText != '') {
  
              // test: does browser grab text correctly?
              alert(lwsSelectedText);
  
              // Set spanish text area content to the selected text from browser
              // --Error here: does not set text at all--
              spanishText.innerHTML(lwsSelectedText);
  
          }
  
      }
  
  
      // When document ready
      $(document).ready(function () {
  
          lwsAddContent(lwsActivateContent);
  
      });
  
  })();
  </code></pre>
  
  <p>When I use the extension, the pop-up loads, and when I highlight some text, lwsSelectedText populates with the correct text and it displays in the alert but it doesn't display in my text area. Am I accessing the contents of lwsSpanishTextArea wrong?</p>
  
  <p>Thanks!</p>