Javascript textarea charcoutner isn't working

February 25, 2022

hello my code isn’t working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script

let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');   

text.addEventListener("input", updateCount());

function updateCount(){
count.value + number
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karakter sayısı</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
    <div class="ses">
        <textarea  id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
    </div>
  <span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>

>Solution :

In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.

And in the function itself you will need to put (=assign) the calculated count somewhere too:

let text = document.querySelector('#text');
let count = document.querySelector('#count');   

text.addEventListener("input", updateCount);

function updateCount(ev){
  count.textContent=ev.target.value.length;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karakter sayısı</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
    <div class="ses">
        <textarea  id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
    </div>
  <span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>

ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.