Why am I not getting the content of this element when I call it by its ID?

Question

I want to limit how long a string is when updated by JS. To do so, I want to use a loop that checks the length of the current string and only accepts new inputs if the string is shorter than the maximum length.

For some reason when I ask for the length of the html element, it returns the... nature of the element?

This specifically: [object HTMLParagraphElement]

This is how I'm getting the html element:

const digits = document.getElementById("digits");

This is how I'm trying to limit the size, I marked which line I'm currently using to add numbers (it works on its own, I just want to limit how long the string can be):

addEventListenerList(numeral, "click", () => {
    if (digits.toString().length > 10){  //(*)
        return null;
    } else {
        digits.innerText += event.target.value; //This is the line that adds numbers.
    }
});

So yeah, it's not working because line (*) is finding the current length to be 29 (the length of [object HTMLParagraphElement]). I have no idea how to get the length of the content, and not this... what is this exactly?

I don't know if it's useful, but just in case, numeral is a node list that I iterate through using this:

function addEventListenerList(list, event, fn){
    for (let i = 0, len = list.length; i < len; i++) {
        list[i].addEventListener(event, fn);
    }
}

You're doing `.toString()` on the element itself, not on its content. Try `digits.textContent.length` instead. — Tyler Roper, Aug 14 '19 at 13:55
Welcome. Please see how to create an [mcve] - most questions (including this one) SHOULD include one. — random_user_name, Aug 14 '19 at 13:59

Matt L. · Accepted Answer · 2019-08-14T14:19:46.640

The most direct way to solve this is to use digits.textContent.length > 10 instead of digits.toString(). However, as others have noted, digits.value.length and/or digits.innerHTML.length may be relevant in some cases.

innerHTML is less desirable here because nested html objects or formatting tags like or will count as part of the calculated length. It also uses more memory than .textContent. See innerText vs innerHtml vs label vs text vs textContent vs outerText for a longer discussion on the differences.

score 1 · Answer 2 · answered Aug 14 '19 at 13:58

1

You assigned the element to variable not its contents, to get the length of the contents depends on what element type it is.

If it is a input then you can get the value:

digits.value.length

If it is another type you can use the innerHTML property:

digits.innerHTML.length

answered Aug 14 '19 at 13:58

Vince

945
7
17

Thanks, I'll accept the answer as soon as the timer is up! – Billedale Aug 14 '19 at 14:04
1

innerHTML is less desirable here because nested html objects or formatting tags like or will count as part of the calculated length. Value is intended to "set or returns the value of the option ... sent to the server" when a form is submitted. See https://gist.github.com/GoesToEleven/d3bdbb5b5e563fc9cf93#targetText=innerHTML%20parses%20content%20as%20HTML,also%20takes%20styles%20into%20consideration. – Matt L. Aug 14 '19 at 14:04
@MatthewLavin fair point, i just wanted to give alternative means as the textContent was already mentioned – Vince Aug 14 '19 at 14:09
1

@MatthewLavin I agree with the innerHTML assessment however value length may matter – Vince Aug 14 '19 at 14:13
@VincentChinner I added your feedback to my edited response. – Matt L. Aug 14 '19 at 14:20
@MatthewLavin, thanks upvoted as a comprehensive answer – Vince Aug 14 '19 at 14:21

Why am I not getting the content of this element when I call it by its ID?

2 Answers2