Не могу посчитать длинну Textarea

Question

Вот код

 if($('.card-task__result-wrapper__inner__textarea.js-task-result-textarea').val().length > 8){

выдаёт ошибку

Cannot read properties of undefined (reading 'length')

Цикл много раз проверяет изменения, но почему-то скрипт не работает

Answer 1

Ох, не зря просят вас приводить примеры вёрстки. Если у вас вёрстка как у меня в примере - работать будет. Обратите внимание, Оба класса находятся в самом textarea.

alert($('.card-task__result-wrapper__inner__textarea.js-task-result-textarea').val().length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form action="">
  <textarea class="card-task__result-wrapper__inner__textarea js-task-result-textarea">прап апрапрр вапвап вапрпваппвап вап авпвапвап ап</textarea>
  
</form>

Вот только судя по именам классов, у вас textarea вложен в какой-то враппер, в этом случае как вам и сказали, при вызове свойства длины textarea не хватает пробела. В этом случае код выглядит так:

alert($('.card-task__result-wrapper__inner__textarea .js-task-result-textarea').val().length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="">
  <div class="card-task__result-wrapper__inner__textarea">
    <textarea class="js-task-result-textarea">прап апрапрр вапвап вапрпваппвап вап авпвапвап ап</textarea>
  </div>
  
</form>

Ну и вы уже можете заменить alert на ваш условный оператор.

Вот код для вашей вёрстки. Я подумал и привязался к событию keyup, оно и клавишу BackSpace захватывает. Правда без стилей изначально кнопка в моём примере видна, надеюсь, с вашими стилями этого недостатка у вас не будет.

$(document).ready(function () {
  
  $(".card-task__result-wrapper__inner__textarea.js-task-result-textarea").on("keyup", function () {
      if ($(".card-task__result-wrapper__inner__textarea").val().length >= 8) {
        $(".button-input.button-input_blue.js-task-result-button.card-task__button").css("display", "block");
      } else {
        $(".button-input.button-input_blue.js-task-result-button.card-task__button").css("display", "none");
      }
    }
  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="">
  <textarea name="result" placeholder="Добавить результат" class="card-task__result-wrapper__inner__textarea js-task-result-textarea"></textarea>
  <button type="1" class="button-input button-input_blue js-task-result-button card-task__button" tabindex="-1" id="99247"><span class="button-input-inner "><span class="button-input-inner__text">Выполнить</span></span></button>
</form>

БЛОГ НА HUSL

Не могу посчитать длинну Textarea

Ответы (1 шт):