Автоматический запуск JavaScript функции при загрузке страницы

Question

У меня проблема с моим кодом JavaScript, который вы можете увидеть ниже.

Итак, код считает символы в некотором текстовом поле и считает их в реальном времени, когда пользователь что-то вводит. В зависимости от количества символов у пользователя есть две информации:

1. Некоторое текстовое сообщение зависит от количества
2. Количество символов

Проблема в том, что этот код начинается просто когда мы набираем хотя бы один символ. Но на моем веб-сайте у меня есть в этом текстовом поле некоторая информация, которая загружается из базы данных при загрузке страницы, поэтому в текстовом поле уже есть некоторые символы. Но функция подсчета не запускается при загрузке страницы, как я уже сказал, нам нужно ввести (или удалить) хотя бы один символ.

Я знаю, что думал, что мой код должен работать, потому что я использую onkeyup событие. Но я также пытался использовать событие onload . Тоже пробовал добавить window.onload = countDescriptionChar(this); в код скрипта

Но он по-прежнему не работает.

Итак, мне нужно запустить скрипт при загрузке страницы (когда у нас нет нажатой клавиши) и сохранить функциональность в подсчитывать символы в реальном времени, когда пользователь нажимает какую-то клавишу.

Я думаю, что делаю что-то не так ...

У вас есть весь мой код ниже

Спасибо за помощь!

Вот код JavaScript, который я использую для этого

        function countDescriptionChar(val) {
            var len = val.value.length;
            if ((len >= 0) && (len < 105)) {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";
            }
            else if ((len >= 105) && (len <= 135)) {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";
            }
            else {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";
            }
        };

Затем мой HTML код, который я использую в шаблоне. I используйте Laravel для отображения данных в текстовом поле из базы данных

<label for="" class="mt-4">Description</label>
<div id="statusDescription"></div>
Symbols: <div class="seocount" id="symbolsDescription"></div>

<textarea class="form-control" id="meta_description" name="meta_description" onkeyup="countDescriptionChar(this)" >
@isset ($article->meta_description)
{{ $article->meta_description}}
@endisset
</textarea>

Answer 1

Глядя на ваш код, я добавил две вещи, которые, похоже, делают то, на что вы надеетесь:

• Добавить $(document).ready(countDescriptionChar()) к вашему JS коду;

• Добавьте тернарный оператор, который будет искать ваш параметр, когда вы назначаете len var, если он возвращается как «undefined», тогда он должен искать идентификатор вашего <textarea> и собирать его значение

  var len = val === undefined? document.getElementById ('meta_description'). value.length: val.value.length

$(document).ready(countDescriptionChar())

function countDescriptionChar(val) {
  
  var len = val === undefined ? 
      document.getElementById('meta_description').value.length :
  val.value.length
  
  if ((len >= 0) && (len < 105)) {
    $('#symbolsDescription').text(len);
    document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";
  }
  else if ((len >= 105) && (len <= 135)) {
    $('#symbolsDescription').text(len);
    document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";
  }
  else {
    $('#symbolsDescription').text(len);
    document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="" class="mt-4">Description</label>
<div id="statusDescription"></div>
Symbols: <div class="seocount" id="symbolsDescription"></div>

<textarea class="form-control" id="meta_description" name="meta_description" onkeyup="countDescriptionChar(this)" >
@isset ($article->meta_description)
{{ $article->meta_description}}
@endisset
</textarea>