Счетчик строк в реальном времени в текстовой области - PullRequest
Новая
       1

Счетчик строк в реальном времени в текстовой области

0 голосов
/ 31 января 2020

Код Jsfiddle Код работает в Jsfiddle

Не работает в firefox или любом браузере Ошибка строки: tarea.addEventListener ('input', update) Ошибка Firefox " TypeError: tarea is null "Ошибка в Chrome is" Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' of null "

Пожалуйста, помогите мне. Я ищу эффективное решение с простым кодом, который работает правильно 

  <html>
    <head>
         <title>Counter</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
<script type="text/javascript">
   // Encapsulate function to document.ready now not error.     
    $(document).ready(function(){
   var tarea = document.querySelector('#ta')
   var input = document.querySelector('#rt')

    function update() {
   var res = (tarea.value.match(/\n/g)) ? tarea.value.match(/\n/g).length : 0;

     input.value = res;
   }
   tarea.addEventListener('input', update) //Error Here
   });

tarea.addEventListener('input', update) //Error Here

$(document).ready(function(){
         if (jQuery) {  
           // jQuery is loaded  
            alert("Jquery load!");
         } else {
           // jQuery is not loaded
           alert("Jquery Doesn't Work");
         }
      });

</script>
<body>
   <textarea name="ta" id="ta" rows="4" cols="50">
      ABC
      DEF
      GHI
  </textarea>
    <input type="text" id="rt" name="textnumber" value="">

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Введите ваш код через валидатор. Я думаю, что у вас пропущены точки с запятой и плохие скобки.

Я вижу, вы используете jQuery. Примерно так должно хватить: 

$(function() {
  var tarea = $('#ta');
  var input = $('#rt');
  function update(e) {
    var val = tarea.val(),
    matches = val.match(/\n/g),
    res = (matches) ? val.match(/\n/g).length : 0;
    input.val(res);
  }
  tarea.on("input", update)
  .trigger("input");//set initial value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="ta" id="ta" rows="4" cols="50">
      ABC
      DEF
      GHI
  </textarea>
<input type="text" id="rt" name="textnumber" value="">
0 голосов
/ 31 января 2020

Проблема с вашим кодом в том, что вы пытаетесь получить доступ к элементу до полной загрузки документа.

Вы должны либо переместить свой код JavaScript в конце (прямо перед закрытием * 1003) * tag) или переместите весь свой код обработки событий (включая определение tarea) в $(document).ready(...).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...