title: Need to getElementById twice to get correct value in Javascript
body: <p>I am setting a scrollTop animation to keep a chat view displaying the latest message at the bottom.</p>
  
  <p>I fire the following method as follows when loading the conversation and after sending a message:</p>
  
  <pre><code>loadMessages(matchId) {
      ...
      // ..filling the messages array..
      this.scrollToBottom();
      ...
  }
  
  sendMessage(matchId) {
      ...
      // ..updating the messages array..
      this.scrollToBottom();
      ...
  }
  
  scrollToBottom() {
      const div = document.getElementById('contentArea');
      div.scrollTop = div.scrollHeight;
  }
  </code></pre>
  
  <p>chat.css:</p>
  
  <pre><code>.contentArea {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 90%;
    height: 60%;
    background-color: rgba(255, 255, 255, 0.267);
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: visible;
  }
  </code></pre>
  
  <p>I need to click on <code>loadMessages()</code> twice to get the scroll to happen, same thing when a send a message, I need to send two messages to get the content scroll to the first of the two messages..</p>
  
  <p>It looks like I have to <code>document.getElementById('contentArea')</code> twice to get the correct value..</p>
  
  <p>I guess I am calling the function too soon to get the correct value the first time.</p>
  
  <p>What can I do? Thanks!</p>