CODEWITHSUNDEEP
javascriptjqueryforms
Hasbulla
Hasbulla

Reputation: 85

Javascript counting remaining characters in textarea

I simply want to count the remaining characters while typing inside the textarea. Im very new to Javascript and I wrote this code but it is not working and I cannot figure out why.

It is not counting anything. Displays 0 / 300 all the time.

Code inside html file:

<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>

Code inside 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');
}

  
});

*Note that I cut out unimportant code form the html part, since it does not relate to the textarea and would just be unnecessary to consider.

Upvotes: 0

Views: 2395

Answers (1)

Mihai T
Mihai T

Reputation: 17697

I understand you are new to javaScript. But in your code you mix jquery with javascript so you have some errors because of that.

.onkeyup(function() is a javascript function = on('keyup', function(){} in jquery

textContent is pure javascript = text( in jquery.

Also, please check developer's console in the browser. That's the first place you look when something is not working

$('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>

Upvotes: 1

Related Questions