Reputation: 85
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
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