Exercise Solution: Textarea Counter

1. Count on Button Click Top ↑

$( "#my_b1" ).on( "click", function () {
    $( "#display1" ).text(
        $( "#t1" ).val().length
    );
});

2. Count while Text Changes Top ↑

$( "#t2" ).on( "input", function () {
    $( "#display2" ).text(
        $( this ).val().length
    );
});

input is preferred here because it also catches paste and other editing methods.

3. Add a Progressbar Top ↑

$( "#progress" ).progressbar({
    value: 0,
    max: 50
});

$( "#t2" ).on( "input", function () {
    const length =
        $( this ).val().length;

    $( "#display2" ).text( length );
    $( "#progress" ).progressbar(
        "value",
        length
    );
});

Textarea counter · Progressbar demo

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<textarea name=t1 rows=3 id=t1 class=form-control></textarea>
<button type='button' class='btn btn-danger' id=my_b1>Count</button>
<div id=display1></div>

Original example 2

<script>
$(document).ready(function() {
$("#my_b1").click(function(){
var my_str=$('#t1').val();
$('#display1').html(my_str.length)
})

})
</script>

Original example 3

<textarea name=t2 rows=3 id=t2 class=form-control></textarea>
<div id=display2></div>

Original example 4

<script>
$(document).ready(function() {

$('#t2').keyup(function(){
var my_str2=$('#t2').val();
$('#display2').html(my_str2.length)
})

})
</script>

Additional Original Learning Routes Top ↑

• ../templates/custom.css

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: