Javascript 如何在同一页面中显示多个文本区域的字符计数器？

我有一个带有几个文本区域的HTML表单。 我需要限制每个区域的字符数。 我想买一个柜台。 我在网上找到这个：

$（'textarea'）.keyup（函数（）{
var characterCount=$（this）.val（）.length，
当前=$（“#当前”），
最大值=$（“#最大值”），
计数=$（“#计数”）；
当前.文本（字符计数）；
});
#计数{
浮动：对；
填充：0.1rem0；
字体大小：0.875rem；
}

显示文本区域的字符数
0
/ 300
您需要对所有输入执行操作，然后在输入上附加一个
事件侦听器，如下所示：


var textareas=document.querySelectorAll（'textarea'）；
textareas.forEach（textarea=>{
textarea.addEventListener（'input'，function（）{
var charCount=textarea.value.length；
var count=textarea.nextElementSibling；
count.innerHTML=charCount+'/300'；
})
})
#计数{
浮动：对；
填充：0.1rem0；
字体大小：0.875rem；
}

显示文本区域的字符数
0/300
0/300
0/300
ID应该是唯一的。给不同的身份证。它会起作用的

CSS:

HTML:

多个文本区域具有不同的
maxLength
值

id
问题也通过将其设置为
class

从其他方面进行修改


代码

HTML

这可能是因为复制文本区域时也会复制它们的ID，因此最终会有多个具有相同ID的对象，因此是无效的，并导致这种行为。您必须消除ID的重复数据才能使其适用于所有用户。如果您正在复制其他具有ID的项目，则同样适用于这些项目@非常感谢@barhatsorI的maxlenght显示屏有问题。用你的解决方案，它是固定的。对于不同的文本区域，我有不同的最大长度。请如何解决此问题？虽然这样做有效，但
id
的唯一性仍然适用，应该适当处理。例如
getElementById（'count'）
将始终返回第一次出现的
div#count
，无论您在哪里使用它<代码>id
应是唯一的，无论您喜欢与否，也无论您是否需要它。但是，不要把它与只设置no
id
混为一谈，这很好。
#textCount, #textCount1 {
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}

<div class="wrapper">
    <h1>Displaying The Character Count of a Textarea</h1>
    <textarea id="textarea1" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount1">
        <span id="current1">0</span>
        <span id="maximum1">/ 300</span>
    </div>

    <textarea id="textarea2" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount2">
        <span id="current2">0</span>
        <span id="maximum2">/ 300</span>
    </div>
</div>

$('#textarea1').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current1'),
      maximum = $('#maximum1'),
      theCount = $('#textCount1');
    
  current.text(characterCount);
 
        
});

$('#textarea2').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current2'),
      maximum = $('#maximum2'),
      theCount = $('#textCount2');
    
  current.text(characterCount);
 
        
});

  <div class="wrapper">
      <h1>Displaying The Character Count of a Textarea</h1>
  <div>
     <textarea name="textarea" maxlength="450" placeholder="Start Typin..." autofocus> </textarea>
    <div class="count">0 / 450</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="400" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 400</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="500" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 500</div>
  </div>
</div>

let textareas = document.querySelectorAll('textarea');

textareas.forEach(textarea => {
  textarea.addEventListener('input', function() {
    let charCount = textarea.value.length;
    let count = textarea.nextElementSibling;
    let maxLength = textarea.maxLength;
    count.innerHTML = charCount + ' / ' + maxLength;
  })
})