javascript: get contents of textarea, textContent vs. innerHTML vs. innerText

Question

I am having trouble getting the contents of a textarea with js. I feel like I've done this many times before without problems but something is throwing it off or I have a mental block.

html

<textarea id="productdescript">test copy..asdfd</textarea><button value="Enter" onclick="addProduct()">

js

function addProduct() {
var descript = document.getElementById('productdescript').textContent;
alert(descript);
}

Firefox is the only browser I have currently.

When I use textContent, the alert box appears but it is blank. When I use value, the alert box appears and says "Undefined" When I use innerHTML, all the HTML appears including the tags.

Also, I understand that textContent only runs in FF and for cross browser compatibility you need to do something like innerText and textContent but textContent is not working in FF. There is no jquery on this app

What is the correct cross browser way to get contents of textarea! Thanks for any suggestions.

Answer 1

For textarea, you could only use .value in your scenario (I tested your given code and it works fine). .

Also,

1) keep in mind that you call this function addProduct() ONLY after your element is mentioned in the code, otherwise it will be undefined.

2) there must not be another element with id as productdescript

3) there must not be a JS variable called productdescript