Javascript对文本区域中剩余字符的计数

Question

我只是想在文本区中输入时计算剩余的字符。我是Javascript的新手，我写了这段代码，但它不工作，我不知道为什么。

它不会计算任何东西。始终显示0/ 300。

html文件中的代码：

<p>  <textarea name="Inhalt" id="Inhalt" placeholder="Ihre Nachricht..." rows="5" maxlength="300 
</textarea> </p>
    
<div id="the-count">
 <span id="current">0</span>
 <span id="maximum">/ 300</span>
</div>

<script src="textarea_count.js"></script>

Textarea_count.js中的代码：

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

var characterCount = $(this).val().length,
  current = $('#current'),
  maximum = $('#maximum'),
  theCount = $('#the-count');

current.textContent(characterCount);


if (characterCount < 100) {
current.css('color', '#666');
}
if (characterCount > 99 && characterCount < 140) {
current.css('color', '#6d5555');
}
if (characterCount > 139 && characterCount < 200) {
current.css('color', '#793535');
}
if (characterCount > 199 && characterCount < 250) {
current.css('color', '#841c1c');
}
if (characterCount > 249 && characterCount < 299) {
current.css('color', '#8f0001');
}

if (characterCount >= 300) {
maximum.css('color', '#8f0001');
current.css('color', '#8f0001');
theCount.css('font-weight','bold');

} else {
maximum.css('color','#666');
theCount.css('font-weight','normal');
}

  
});

*请注意，我从html部分中去掉了不重要的代码，因为它与文本区域无关，不需要考虑。

Answer 1

我知道你是javaScript的新手。但是在你的代码中，你会把jquery和javascript混在一起，因此你会有一些错误。

在jquery中，.onkeyup(function()是一个javascript function = on('keyup', function(){}

在jquery中，textContent是纯javascript = text(。

另外，请在浏览器中查看开发人员控制台。当某些东西不起作用时，这是你首先要看的地方

​

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

  var characterCount = $(this).val().length,
    current = $('#current'),
    maximum = $('#maximum'),
    theCount = $('#the-count');

  current.text(characterCount);


  if (characterCount < 100) {
    current.css('color', '#666');
  }
  if (characterCount > 99 && characterCount < 140) {
    current.css('color', '#6d5555');
  }
  if (characterCount > 139 && characterCount < 200) {
    current.css('color', '#793535');
  }
  if (characterCount > 199 && characterCount < 250) {
    current.css('color', '#841c1c');
  }
  if (characterCount > 249 && characterCount < 299) {
    current.css('color', '#8f0001');
  }

  if (characterCount >= 300) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight', 'bold');

  } else {
    maximum.css('color', '#666');
    theCount.css('font-weight', 'normal');
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="Inhalt" id="Inhalt" placeholder="Ihre Nachricht..." rows="5" maxlength="300"></textarea>
<div id="the-count">
 <span id="current">0</span>
 <span id="maximum">/ 300</span>
</div>

​