How to set the scrollTop value for a textarea?

Question

I am facing a problem when I try to set the scrollTop value for a textarea. My JavaScript code is as follows -

 var element =  document.getElementById("messageTextArea");
 console.log("scrollTop = "+element.scrollTop);
 console.log("scrollHeight = "+element.scrollHeight);
 element.scrollTop = element.scrollHeight; // doesn't work!

 console.log("The value is-->"+element.scrollTop); // no change!

 element =  document.getElementById("messageTextArea"); 
 console.log("Now scrollTop = "+element.scrollTop);         // no change!
 console.log("Now scrollHeight = "+element.scrollHeight);

The Firefox console log gives the following -

scrollTop = 0 
scrollHeight = 86
The value is-->0
Now scrollTop = 0  
Now scrollHeight = 86

What I really want to do is to make the textarea somehow automatically be scrolled down to the maximum when the text does not fit in the actual width and height and the scroll bar gets activated.

Here's are two screenshots explaining the problem -

This is what I have currently -

And this is what I would like to have -

Please help!

Answer 1

Ok, sorry guys. The problem was that I was getting the wrong text area. This is so embarrassing! Now it works.

  var element =  document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!