时间戳

首页 > 解决方案 > 当我通过它的 ID 调用它时，为什么我没有得到它的内容？

javascript - 当我通过它的 ID 调用它时，为什么我没有得到它的内容？

问题描述

我想限制 JS 更新字符串时的长度。为此，我想使用一个循环来检查当前字符串的长度，并且仅在字符串短于最大长度时才接受新输入。

出于某种原因，当我询问 html 元素的长度时，它返回...元素的性质？

这具体是：[object HTMLParagraphElement]

这就是我获取 html 元素的方式：

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

这就是我试图限制大小的方式，我标记了我当前用于添加数字的行（它自己工作，我只想限制字符串的长度）：

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

所以是的，它不起作用，因为行 (*) 发现当前长度为 29（[object HTMLParagraphElement] 的长度）。我不知道如何获取内容的长度，而不是这个......这到底是什么？

我不知道它是否有用，但以防万一，数字是我使用它迭代的节点列表：

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

标签： javascript

解决方案

解决这个问题最直接的方法是使用digits.textContent.length > 10代替digits.toString(). 然而，正如其他人所指出的，digits.value.length和/或digits.innerHTML.length在某些情况下可能是相关的。

innerHTML这里不太理想，因为嵌套的 html 对象或格式化标签或者将计为计算长度的一部分。它还比.textContent. 有关差异的详细讨论，请参阅innerText vs innerHtml vs label vs text vs textContent vs outerText。

推荐阅读