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

【问题标题】：Characters limitation by Javascript function doesn't update the HTMLJavascript 函数的字符限制不会更新 HTML
【发布时间】：2020-10-27 10:32:29
【问题描述】：

我有以下带有 JS 脚本的 HTML 代码：

<!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>s 中的文本），但它根本没有做任何事情。

谁能指出哪里出了问题？

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

谢谢

【问题讨论】：

charLimitElements 是<p> 元素的集合。 paragraph (<p>) 没有值。使用.textContent（或.innerHTML）

标签： javascript html google-apps-script google-docs

【解决方案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>

【讨论】：

以防相关订单正常工作。是否有理由让它在未来的执行中表现不同（没有对代码进行任何更改）？
@YanivAflalo 使用当前的 JS 实现，顺序是有保证的，但是，您会注意到可以通过开发者控制台更改元素的顺序。这是一个小改动，它为代码增加了更多的健壮性，不能保证未来浏览器的未来实现。正如我所说，它允许每个独立更新（因此代码不仅更健壮，而且更具可扩展性，如果您将其与数千个文本区域一起使用，也不会遇到性能问题）