Javascript 函数的字符限制不会更新 HTML

Question

我有以下 HTML 代码和 JS 脚本：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <script type="text/javascript">
      function charLimit() {
        var TextAreaElements = document.getElementsByClassName("metaTextArea");
        var charLimitElements = document.getElementsByClassName("cLimit");
        for (var i = 0; i < charLimitElements.length; i++) {
          charLimitElements[i].value = "(" + TextAreaElements[i].value.length + "/" + TextAreaElements[i].maxLength + ")";
        }
      }
    </script>

    <textarea class="metaTextArea" maxlength="40" onkeyup="charLimit();">text1</textarea>
    <p class="cLimit"></p>
    <textarea class="metaTextArea" maxlength="100" onkeyup="charLimit();">text2</textarea>
    <p class="cLimit"></p>

  </body>
</html>

我的目标是在每个文本区域附近设置一个字符限制指示器（通过更新 <p> 中的文本），但它根本没有任何作用。

谁能指出哪里出了问题？

此 HTML 用于我在 google 应用程序脚本上构建的 google 文档插件的边栏。

谢谢

Answer 1

您应该使用 innerText / textContent 或 innerHTML 而不是 value（如果 p 元素可以具有 value 属性, 没有与其存在相关联的自动化逻辑，并且它不影响标签内容):

function charLimit() {
  var TextAreaElements = document.getElementsByClassName("metaTextArea");
  var charLimitElements = document.getElementsByClassName("cLimit");
  for (var i = 0; i < charLimitElements.length; i++) {
    charLimitElements[i].innerText = "(" + TextAreaElements[i].value.length + "/" + TextAreaElements[i].maxLength + ")";
  }
}

<textarea class="metaTextArea" maxlength="40" onkeyup="charLimit();">text1</textarea>
<p class="cLimit"></p>
<textarea class="metaTextArea" maxlength="100" onkeyup="charLimit();">text2</textarea>
<p class="cLimit"></p>

但是，我个人不会依赖元素的顺序来获得与 textearea 关联的 p，而是使用 id。它还将允许每个更新独立于另一个。我还更改了函数的名称，起一个清晰的名称是一个好习惯，这样使用您的代码的人就可以轻松理解：

function displayCharLimit(id) {
  var TextAreaElement = document.getElementById("metaTextArea_" + id);
  var charLimitElement = document.getElementById("cLimit_" + id);
  charLimitElement.innerText = "(" + TextAreaElement.value.length + "/" + TextAreaElement.maxLength + ")";
}

<textarea id="metaTextArea_0" maxlength="40" onkeyup="displayCharLimit(0);">text1</textarea>
<p id="cLimit_0"></p>
<textarea id="metaTextArea_1" maxlength="100" onkeyup="displayCharLimit(1);">text2</textarea>
<p id="cLimit_1"></p>

Javascript 函数的字符限制不会更新 HTML

Characters limitation by Javascript function doesn't update the HTML

html

javascript

google-docs

google-apps-script