Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcus Vinicius Tavares

Contador de caracteres não pode ser duplicado

Por , em Javascript

Recommended Posts

Marcus Vinicius Tavares    0

Marcus Vinicius Tavares
Postado

Estou tentando usar um contador para duas textarea, mas se eu duplico o código só um funciona.

Não entendo nada de Javascript, estou começando agora. Peguei vários exemplos e fiz esse código a baixo.


<form action="#" method="post"> 
<table> 
<tr> 
   <td>Texto:</td> 
   <td><textarea cols="40" rows="5" name="name_area_segundo" onKeyDown="segundo_area_conta()" onKeyUp="segundo_area_conta()"></textarea></td> 
</tr> 
<tr> 
   <td>Caracteres:</td> 
   <td><input type="text" name="segundo_mostra_soma" size=3></td> 
</tr> 
</table> 
</form> 

<script> 
var segundo_quanto_pode = 15;

function segundo_area_conta(){ 
   num_segundo_mostra_soma = document.forms[0].name_area_segundo.value.length;
   if (num_segundo_mostra_soma >= segundo_quanto_pode + 5) { 
      document.forms[0].segundo_mostra_soma.style.background="#ff0000"; } 
	  else { 
            if (num_segundo_mostra_soma >= segundo_quanto_pode){ 
            document.forms[0].segundo_mostra_soma.style.background="#ffc000";}
	           else{ document.forms[0].segundo_mostra_soma.style.background="#ffffff"; } }

contador_segundo() } 
function contador_segundo(){ 
document.forms[0].segundo_mostra_soma.value=document.forms[0].name_area_segundo.value.length } 
</script> 
<form action="#" method="post"> 
<table> 
<tr> 
   <td>Texto:</td> 
   <td><textarea cols="40" rows="5" name="name_area_primeiro" onKeyDown="primeiro_area_conta()" onKeyUp="primeiro_area_conta()"></textarea></td> 
</tr> 
<tr> 
   <td>Caracteres:</td> 
   <td><input type="text" name="primeiro_mostra_soma" size=3></td> 
</tr> 
</table> 
</form> 

<script> 
var primeiro_quanto_pode = 15;

function primeiro_area_conta(){ 
   num_primeiro_mostra_soma = document.forms[0].name_area_primeiro.value.length;
   if (num_primeiro_mostra_soma >= primeiro_quanto_pode + 5) { 
      document.forms[0].primeiro_mostra_soma.style.background="#ff0000"; } 
	  else { 
            if (num_primeiro_mostra_soma >= primeiro_quanto_pode){ 
            document.forms[0].primeiro_mostra_soma.style.background="#ffc000";}
	           else{ document.forms[0].primeiro_mostra_soma.style.background="#ffffff"; } }

contador_primeiro() } 
function contador_primeiro(){ 
document.forms[0].primeiro_mostra_soma.value=document.forms[0].name_area_primeiro.value.length } 
</script>

Se eu usar o código um vez ele funciona, mas se eu repetir o segundo não funciona. O que eu faço?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Insanity    9

Insanity
Postado

Olha, não sei pra que esse código todo só pra uma coisa simples assim, vamos começar:

 

Vou colocar o código aqui e explicar: 

<!DOCTYPE html>
<html>
<head>
<script>
function conta(qual){
	var area1 = document.getElementById("area1").value;
	var area2 = document.getElementById("area2").value;
	if(qual == 1){
		document.getElementById('mostra').innerHTML = area1.length;
	}
	if(qual == 2){
		document.getElementById('mostra2').innerHTML = area2.length;
	}
}
</script>
</head>
<body>
Textarea 1:
<textarea onkeyup="conta(1)" id="area1"></textarea>
<div id="mostra"></div>
Textarea 2:
<textarea onkeyup="conta(2)" id="area2"></textarea>
<div id="mostra2"></div>
</body>
</html>

Criei duas textarea e o evento onkeyup coloquei o mesmo, porém com os argumentos 1 e 2 que na função é a variável "qual". Indo dentro da função declaramos as variáveis que são o valor das textareas e criamos apenas duas condicionais, se qual que a pessoa está digitando é 1 ou dois. Dentro delas mostramos nas divs o length(Tamanho) que seria o número de caracteres do valor da textarea.

 

Tenti deixar o código bem curto. Espero que tenha entendido!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito