Character count of two textareas with different maxlenghts

Question

I would like to obtain the character count of two textareas with different maxlengths. However, I believe I am having some conflicts with their ids (used to achieve their different maxlengths of 50 and 100).

The jQuery code works fine when only used for one textarea by adapting its classes and id. However, it does not work at all for two when I use

 var myText = document.querySelectorAll('#myTextOne, #myTextTwo').maxLength;

NOT A DUPLICATE: someone asked a similar question in Perform character count on different textarea id . However, they used the same maxlength for all textareas which is not my case. I am using the textareas' ids to obtain their particular wordcounts.

function showCounter() {
  $('.counter-1, .counter-2').css({
    display: 'inline-block'
  });
}

function hideCounter() {
  $('.counter-1, .counter-2').css({
    display: 'none'
  });
}

var myText = document.querySelectorAll('#myTextOne, #myTextTwo').maxLength;

$(document).ready(function() {
  var maxLength = myText;

  $('textarea').keyup(function() {

    var getTextCount = $(this).val();
    var charCount = maxLength - getTextCount.length;
    var safePercent = (maxLength * 80) / 100;

    if (getTextCount.length <= safePercent) {
      $('.counter-1, .counter-2').html(charCount);
      $('.counter-1, .counter-2').css({
        'color': 'blue'
      });
    } else {
      $('.counter-1, .counter-2').html(maxLength - getTextCount.length);
      $('.counter-1, .counter-2').css({
        'color': 'red'
      });
    }
  });
});

.wrapper {
  display: inline-block;
}

.textbox>textarea {
  width: 200px;
  height: 50px;
  padding: 10px;
}

.counter-1,
.counter-2 {
  display: noane;
  font-size: 10px;
  color: blue;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">

    <!-- First textarea -->
    <div class="textbox">
      <textarea id="myTextOne" maxlength="50" onclick="showCounter()" onfocusout="hideCounter()" placeholder="Write something..."></textarea>
    </div>
    <div class="counter-1"></div>

    <!-- Second textarea -->
    <div class="textbox">
      <textarea id="myTextTwo" maxlength="100" onclick="showCounter()" onfocusout="hideCounter()" placeholder="Write something..."></textarea>
    </div>
    <div class="counter-2"></div>
  </div>
</div>

If you find it easier, here's my CodePen with the same code: https://codepen.io/fergos2/pen/bGGrqbr

`document.querySelectorAll('#myTextOne, #myTextTwo').maxLength` will always give you `undefined`, because the `NodeList` returned by `querySelectorAll` doesn't have a `maxLength` property. The `maxLength` property is on the `textarea` elements **inside** that collection. See the linked question for details. — T.J. Crowder, Oct 28 '19 at 16:48
If you want the `maxLength` for `#myTextOne`, use `document.getElementById("myTextOne").maxLength`. If you want the `maxLength` for `#myTextTwo`, use `document.getElementById("myTextTwo").maxLength`. — T.J. Crowder, Oct 28 '19 at 16:49
If you want the `maxLength` for the `textarea` that the `keyup` event relates to, use `this.maxLength` in the handler. — T.J. Crowder, Oct 28 '19 at 16:50
@T.J.Crowder I wanted to avoid having to repeat the same code for the character count. From your comments, I interpret that that would be the case. Would you recommend any way of avoiding this? — GBeck, Oct 28 '19 at 16:56
There are a couple of ways to avoid repeating the code: Using the DOM structure, or using an attribute on the `textarea` telling the code what counter `div` to update. Using the DOM structure, for instance, you could do `const counterDiv = $(this).parent().next();` because the counter `div` is the next sibling of the parent div of the `textarea`. That's a bit brittle, of course; if you change the structure, it stops working. If you store a selector on the `textarea` as a `data-*` attribute, you can do `const counterDiv = $($(this).attr("data-counter"));` to get the counter `div`. — T.J. Crowder, Oct 28 '19 at 17:00
FWIW, here's the structural version (and a couple of other notes): https://pastebin.com/fuiVeean — T.J. Crowder, Oct 28 '19 at 17:10
I don't think this is a duplicate and have voted to reopen it. Until then here's a quick rehash of your codePen that should do what you need: https://codepen.io/moob/pen/NWWvjqo — Moob, Oct 28 '19 at 17:43

Character count of two textareas with different maxlenghts

0 Answers0