[JS] TextArea 'value' is always empty

[Zalosath]

Hi,

 

Very confused by this, I've got this code:

<div class="col">
	<textarea id="post-reply-textarea" style="-snip-" placeholder="Enter your reply..."></textarea>
</div>

Then trying to get the value from it using jquery:

$("#post-reply-textarea").get(0).value;

Also tried with base JS:

document.getElementById("post-reply-textarea").value;

Both return empty:

''

Also tried innerHTML and val() for jquery, same result.

 

If I initialise the textarea first like this:

<div class="col">
	<textarea id="post-reply-textarea" style="-snip-" placeholder="Enter your reply...">Some text</textarea>
</div>

Then it works. Although, any edits that I make in the textarea are ignored.

 

I'm running these in the Console in inspect element so there shouldn't be any issues with the text area not being loaded or anything like that. Why am I getting this result and how do I fix it?

Cheers.

[Vicarian]

Check that you're actually getting a return value of the DOM object itself.

 

console.log($('#post-reply-textarea'));

It should be a jQuery Object with length equal to 1.  It won't have a length greater than one because it's an ID selector, so you may want to check to make sure you've not accidentally used that ID more than once.  Just search your source markup for multiple occurrences of the ID.  If it's an object with length 0, then you need to change which document is the active one in the inspector.  This can be caused if you've used iframes.  I ran a quick test with jQuery pulled from a CDN and each of your access methods work to obtain the value of the textarea with the exception of innerHTML.  To change the active document in Firefox (on a page with iframes), there will be a dropdown near the top left corner of the console.  Change its value to a page you expect the textarea to be on.  A similar process exists in Chrome.  The dropdown is near to the clear console button, which looks like a circle with a diagonal line through it.

[Zalosath]

12 hours ago, Vicarian said:

Check that you're actually getting a return value of the DOM object itself.

 

console.log($('#post-reply-textarea'));

It should be a jQuery Object with length equal to 1.  It won't have a length greater than one because it's an ID selector, so you may want to check to make sure you've not accidentally used that ID more than once.  Just search your source markup for multiple occurrences of the ID.  If it's an object with length 0, then you need to change which document is the active one in the inspector.  This can be caused if you've used iframes.  I ran a quick test with jQuery pulled from a CDN and each of your access methods work to obtain the value of the textarea with the exception of innerHTML.  To change the active document in Firefox (on a page with iframes), there will be a dropdown near the top left corner of the console.  Change its value to a page you expect the textarea to be on.  A similar process exists in Chrome.  The dropdown is near to the clear console button, which looks like a circle with a diagonal line through it.

The problem was a bit finnicky, but it's exactly what you said. I did have two elements with the same ID, the problem was that one was being created on start-up, this was supposed to replace the existing textarea but I forgot to delete the original one, so I ended up with 2 and hence the problem. Deleting the original textarea fixed the problem