Contador de caracteres | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Tiago Vieira Siqueira

| 389.2k xp | 116 posts

Ele está dando como undefined caracteres. Alguém pode me ajudar?

<html>
 <head>
  <title>Testando</title>
  <meta charset="utf-8">    
 </head>
 <body>
   <textarea id="corpo-mensagem" cols="40" rows="5"></textarea>
   <p>Caracteres: <span id="numero-caracteres">0</span> caracteres.</p>
   <script>
     var campoPostagem = document.querySelector("#corpo-mensagem");
     campoPostagem.addEventListener("input", atualiza);

     function atualiza() {
       var postagem = document.querySelector("#corpo-mensagem");

       var caracteres = postagem.length;

       var contador = document.querySelector("#numero-caracteres");
       contador.innerHTML = caracteres;
     }
   </script>
 </body>
</html>

2 respostas

por Márcia Valdenice Pereira do Nascimento

| 141.9k xp | 9 posts

28/07/2017

Olá Tiago, tudo bem?

O problema está na variável postagem. Você deve atribuir a ela o valor do textarea. É só ajustar para: var postagem = document.querySelector("#corpo-mensagem").value;

solução!

por Gustavo Silva

| 62.5k xp | 4 posts

29/07/2017

Boa Noite Tiago, tudo bem?

O problema no seu código é que você não esta pegando o valor do textarea com a propriedade "value". Segue uma maneira de resolver;

var caracteres = postagem.value.length;

Você também pode deixar seu código um pouco menor removendo a variável "postagem" que é desnecessária já que tem o mesmo valor que a variável "CampoPostagem", assim;

function atualiza() {

       var caracteres = campoPostagem.value.length;

       var contador = document.querySelector("#numero-caracteres");
       contador.innerHTML = caracteres;
     }

Ou também atribuir esse bloco a uma função anonima dentro do "addEventListener", assim;

 campoPostagem.addEventListener("input", function(){
       var caracteres = this.value.length;

       var contador = document.querySelector("#numero-caracteres");
       contador.innerHTML = caracteres;
     });

Obs: O "this" se refere a variável que recebe o evento de input, nesse caso o "CampoPostagem".