Javascript textarea charcoutner isn't working-CodePudding

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

CodePudding user response：

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

CodePudding user response：

A better way is by subscribing to the keyup event and getting the value from the scope using this keyword

function characterCount() {
  document.getElementById('text').onkeyup = function () {
    document.getElementById('count').innerHTML = this.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>
</head>

<body>
    <div >
        <textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
    </div>
    <span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>

</html>