[Resolvido] Calcular Porcentagem de campos em tabela HTML

[Djonatan Buss 0]

Bom galera meu colega criou essa função pra calcular a porcentagem entre os valores de uma tabela de resultados de exames clinicos.

Queria saber se existe uma forma de diminuir essa baita function ou se a forma de fazer em javascript eh assim mesmo, Id por Id.

Também tenho que acertar o controle de manter abaixo de 100% o total...

 

function calcula_porcentagem2()
{
    if ((document.getElementById('total').value != "") && (document.getElementById('segmentados').value != ""))
    {  	
  		document.getElementById('segmentadosPorc').value = (document.getElementById('segmentados').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('bastonetes').value != ""))
    {
		document.getElementById('bastonetesPorc').value = (document.getElementById('bastonetes').value / document.getElementById('total').value )* 100;
    }
     if ((document.getElementById('total').value != "") && (document.getElementById('metamieolocitos').value != ""))
    {

  		document.getElementById('metamieolocitosPorc').value = (document.getElementById('metamieolocitos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('mielocitos').value != ""))
    {

  		document.getElementById('mielocitosPorc').value = (document.getElementById('mielocitos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('linfocitos').value != ""))
    {

  		document.getElementById('linfocitosPorc').value = (document.getElementById('linfocitos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('monocitos').value != ""))
    {

  		document.getElementById('monocitosPorc').value = (document.getElementById('monocitos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('eosinofilos').value != ""))
    {

  		document.getElementById('eosinofilosPorc').value = (document.getElementById('eosinofilos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('basofilos').value != ""))
    {

  		document.getElementById('basofilosPorc').value = (document.getElementById('basofilos').value / document.getElementById('total').value )* 100;
    }
  
    if ((document.getElementById('total').value != "") && (document.getElementById('segmentados').value != ""))
    {
    	document.getElementById('segmentadosPorc').value = (document.getElementById('segmentados').value / document.getElementById('total').value )* 100;
    }
}

[William Bruno 1501]

Sim, lógico que tem como melhorar isso.

 

Primeiro, faça um apelido para o trecho que se repete muitas vezes:

document.getElementById()

algo como:

function id( el ){
   return document.getElementById( el );
}

ai em vez de fazer:

if ((document.getElementById('total').value != "") && (document.getElementById('segmentados').value != ""))

você pode fazer simplesmente:

if ((id('total').value != "") && (id('segmentados').value != ""))

mas existem chamadas repetidas ao mesmo elemento, isso além de demandar um processamento desnecessário, pode ser evitado, por exemplo, guardando:

var v_total = id('total').value;

ai você passaria a testar o valor dessa variável

if ((v_total != "") && (id('segmentados').value != ""))

mas isso ainda está ruim... mesmo que você altere todas as linhas.. a lógica está mal estruturada.

 

se só há uma instrução para ser executada com a condição do IF, as chaves não serão necessárias.

então fazer:

if( tal1==tal2 ){ alert('ae'); }

é o mesmo que:

if( tal1==tal2 ) alert('ae');

se você não pode deixar de jeito nenhum que o total esteja sem valor, então faça os IF encaixados para ele:

var v_total = id('total').value;
if( v_total!='' )
{
    if ( id('segmentados').value != "")
                id('segmentadosPorc').value = (id('segmentados').value / v_total )* 100;
  
    if ( id('bastonetes').value != "")
                id('bastonetesPorc').value = (id('bastonetes').value / v_total )* 100;
    //.. continua o script
}

 

Bom, acho que olhando rapidamente é isso.

[Djonatan Buss 0]

Cara ótima tua resposta e te agradeço muito pela atenção, eu ja havia eliminado algumas repetições mas coisas como

function id( el ){
   return document.getElementById( el );
}

Eu não sabia que era possível. E levando em considerações as tuas dicas ja descobri que não existe uma forma que faça isso sem executar id por id...

As chaves creio que sejam so mecanismo de prevenção mesmo, caso a função precise de mais uma linha...

 

mas isso ainda está ruim... mesmo que você altere todas as linhas.. a lógica está mal estruturada.

 

Ainda depois das tuas dicas a lógica continua mal estruturada?

 

Pra mim o principal problema era a repetição da função, que além de ter como tu disse

existem chamadas repetidas ao mesmo elemento, isso além de demandar um processamento desnecessário, pode ser evitado...

ainda executava a função inteira em cada evento onblur do form. Ou seja, cada input com ID que se ve na função tem um evento onblur="calcula_porcentagem();" O que me passa a ideia de desperdicio de processamento.

Porem como sou um mero iniciante não faço ideia das opções que o javascript oferece...

[William Bruno 1501]

ja descobri que não existe uma forma que faça isso sem executar id por id...

depende... eu precisaria entender melhor oque é que você tá fazendo, para sugerir algo mais aprofundado.

 

 

Ainda depois das tuas dicas a lógica continua mal estruturada?

tá 'um poco melhor', pelo menos não precisa retestar o valor de uma 'constante' a cada IF..

 

 

cada input com ID que se ve na função tem um evento onblur="calcula_porcentagem();" O que me passa a ideia de desperdicio de processamento.

hum.. então me parece que dá para melhorar isso ainda... você precisa recalcular todas as porcentagems no onblur de cada campo ??

ou é só calcular a daquele campo específico ??

 

 

Reposte o script, com as alterações.

[Djonatan Buss 0]

function calcula_porcentagem()
{
    if ((id('total').value != ""))
    {
        var total = (id('total').value);
        if ((id('segmentados').value != ""))
        {
            id('segmentadosPorc').value = trunca((id('segmentados').value / total )* 100);
            maxPorcentagem(total,id('segmentados').value);
        }
        if ((total != "") && (id('bastonetes').value != ""))
        {
            id('bastonetesPorc').value = trunca((id('bastonetes').value / total )* 100);
            maxPorcentagem(total,id('bastonetes').value);
        }
        if ((id('metamieolocitos').value != ""))
        {
            id('metamieolocitosPorc').value = trunca((id('metamieolocitos').value / total )* 100);
            maxPorcentagem(total,id('metamieolocitos').value);
        }
        if ((id('mielocitos').value != ""))
        {
            id('mielocitosPorc').value = trunca((id('mielocitos').value / total )* 100);
            maxPorcentagem(total,id('mielocitos').value);
        }
        if ((id('linfocitos').value != ""))
        {
            id('linfocitosPorc').value = trunca((id('linfocitos').value / total )* 100);
            maxPorcentagem(total,id('mielocitos').value);
        }
        if ((id('monocitos').value != ""))
        {
            id('monocitosPorc').value = trunca((id('monocitos').value / total )* 100);
            maxPorcentagem(total,id('monocitos').value);
        }
        if ((id('eosinofilos').value != ""))
        {
            id('eosinofilosPorc').value = trunca((id('eosinofilos').value / total )* 100);
            maxPorcentagem(total,id('eosinofilos').value);
        }
        if ((id('basofilos').value != ""))
        {
            id('basofilosPorc').value = trunca((id('basofilos').value / total )* 100);
            maxPorcentagem(total,id('basofilos').value);
        }
    }
}

function trunca(numero)
{
    $formatedNumber = numero.toFixed(2); //2 = quantas casas decimais
    return ($formatedNumber);
}

function id( el ){
   return document.getElementById( el );
}

function maxPorcentagem(total,valor) // aqui ta tudo errado ainda...
{
    var max =+ valor;
    alert(total);
    alert(max);
    if (total < max){
        alert(total);
        return true;
    }
    else
    {
        alert('Excede valor total');
        return false;
    }
}

Criei outras funções pra auxiliar... a maxPorcentagem é para que não exceda o valor total de leucocitos ( nao ter valores que resultem > que 100%)

Não sei qual a politica do forum para imagens, mas vou passar o formulario que estou tentado arrumar

 

http://yfrog.com/1utestehj

 

A porcentagem eh referente a segunda coluna preenchível, o primeiro campo é o total e os outros são a discriminação em como estavam distribuidos dentro do total...

 

você precisa recalcular todas as porcentagems no onblur de cada campo ??

ou é só calcular a daquele campo específico ??

 

Somente a daquele campo especifico.

[William Bruno 1501]

Então fazer assim:

function calcula_porcentagem( destino, campo )
{
    var total = id('total').value;
    if ( total != "" && id( campo ).value != "" )
    {
        id( destino ).value = trunca((id( campo ).value / total )* 100);
        maxPorcentagem(total,id( campo ).value);
    }
}  

não é mais interessante?

ai você manda os parâmetros para essa função.

onblur="calcula_porcentagem( 'segmentadosPorc', 'segmentados' );"

onblur="calcula_porcentagem( 'bastonetesPorc', 'bastonetes' );"

e veja que ainda dava pra otimizar o id( campo ).value

 

^_^

[Djonatan Buss 0]

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif Cara, mt obrigado, essa tua solução era exatamente o que eu queria poder fazer...

Pode dar como resolvido o tópico, agora vou trabalhar na funcao maxPorcentagem que nao ta funcionando a comparação

if (total < max){

Já tentei usar um parseFloat() mas não consegue descobrir que 666666 > 555555,55

Mas creio que seja duvida pra outro tópico!!

 

Valeu William

[William Bruno 1501]

retire a virgula...

 

lembre-se de usar o sistema americano...

100,50 = 100.50 (cem reais e ciquenta centavos)

[Djonatan Buss 0]

A comparação ja estava funcionando, eu que tava errado.

meu problema agora é q não consigo fazer uma soma dos campos pra testar se excedem 100%

 

Essa é a solução quie cheguei ateh então ( vou postar para auxiliar pessoal no futuro e pq fiz mudanças )

 

function calcula_porcentagem( destino, campo )
{
    alert(destino);
    var total = id('total').value;
    if ( total != "" && id( campo ).value != "" )
    {
        id( destino ).value = trunca((id( campo ).value / total )* 100);
        maxPerc();
        //maxPorcentagem( destino, campo );

    }
}

function trunca(numero)
{
    formatedNumber = numero.toFixed(2); //2 = quantas casas decimais
    return (formatedNumber);
}

function id( el ){
   return document.getElementById( el );
}

Agora entra um cálculo que eu preciso fazer. tenho que checar se a soma de todos os campos é < que o total, ou seja se a soma dos campos não excede 100%

 

Adaptei essa função

function maxPerc()
{
    alert("vai começa a brincadera");
    var checks = document.getElementsByTagName("input");
    var acum;
    for(j=0;j<checks.length;j++){
        if(checks[j].getAttribute("porc") == "sim"){
            if(checks[j].value != ""){
                alert("oie" + checks[j].value);
                var teste = checks[j].value;
                acum += parseInt(checks[j].value);
                alert(acum);
                if (acum>100){
                    alert("O resultado de"+checks[j].getAttribute("id")+"excedeu o total");
                    checks[j].focus();
                }
            }
            else alert("putz");         
        }
    }
}

O problema nessa função é que não consigo fazer o javascript somar, ele ta concatenando sempre, e qnd uso o parseInt ele me retorna NaN

PS: essa função é adaptada de uma função que encontrei no laboratorio de scripts.

[Djonatan Buss 0]

Assim funcionou caros colegas.

 

function maxPerc()
{
    var checks = document.getElementsByTagName("input");
    var acum = Number(0);
    for(j=0;j<checks.length;j++){
        if(checks[j].getAttribute("porc") == "sim"){
            if(checks[j].value != ""){
                acum += parseFloat(checks[j].value);
                if (acum>100){
                    alert("O resultado de " + checks[j].getAttribute("id") + " excedeu o total");
                    checks[j].focus();
                    return false;
                }
            }                    
        }
    }
    return true;
}

Na verdade o foco ainda não funciona, e devo lembrar que vcs devem adicionar os atributos porc="sim" no input como no exemplo.

        <td><input type="text" name="eosinoPercentCan" id="eosinofilosPorc" size="8" disabled="true"  porc="sim"></td>