title: Why button will not append text from textarea to a panel (Bootstrap)?
body: <p>I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;!-- Panel where text will be appended to --&gt;
          &lt;div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"&gt;&lt;/div&gt;
  
  
          &lt;!-- Textarea and button --&gt;
          &lt;div class="panel panel-footer" style="height:40px"&gt;
              &lt;div class="form-group col-md-10 col-lg-10"&gt;
                  &lt;input type="text" placeholder="Type your message here" class="form-control" id="messageBar" /&gt;
              &lt;/div&gt;
              &lt;div class="input-group-btn col-md-2 col-lg-2"&gt;
                  &lt;button id="sendMessageButton" class="btn btn-default"&gt;Send&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var sendMessageButton = document.querySelector('#sendMessageButton');
  var messageBar = document.querySelector('#messageBar');
  var mainChatBox = document.querySelector('#mainChatBox');
  
  sendMessageButton.addEventListener("click", function (event) {
           var message = messageBar.value;
           mainChatBox.innerHTML += message + "&lt;br /&gt;";
      });
  </code></pre>
  
  <p>I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.</p>
  
  <p>Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.</p>
  
  <p><a href="https://www.reddit.com/r/learnjavascript/comments/5loycx/issues_with_grabbing_text_from_a_text_input_and/" rel="nofollow noreferrer">Reddit post link</a></p>
  
  <p>I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.</p>