Подсчет вхождений строки в текстовой области с использованием jQuery / Javascript не обновляется при новом нажатии кнопки

Question

У меня есть кнопка, которая помещает строку:

<dt></dt><dd></dd>

до конца текста в текстовой области с идентификатором #upcoming_text.

Я использую JavaScript для подсчета количества вхождений </dd> при каждом нажатии кнопки. Если число <dt> больше 20, то у меня есть if -статус, который запрещает добавление какой-либо из вышеуказанных строк.

Счетчик работает при обновлении первой страницы, но, похоже, он не учитывает новое количество вхождений </dd> при каждом последующем нажатии кнопки. (Я проверил это, предупредив переменные numlines, и он остается на номер, когда страница была обновлена.)
Я что-то пропустил?

$("#new_act").click(function(){  
  var text = $('#upcoming_text').text();  
  var eachLine = text.split('/dd');  
  var numlines = eachLine.length;  
  if(numlines > 20){  
    alert("You've reached the maximum number of acts");  
  }  
  else{  
    if (!$("#upcoming_text").val()){  
      $("#upcoming_text").val($("#upcoming_text").val()+"<dt></dt>\n<dd></dd>");  
    }  
    else{  
      ("#upcoming_text").val($("#upcoming_text").val()+"\n<dt></dt>\n<dd></dd>");  
    }  
  }  
});

Answer 1

Метод text возвращает внутренний текст элемента, который является оригинальным значением из кода HTML.Вместо этого следует использовать метод val, который возвращает текущий текст.