Javascript Obtendo valores pelo document.getElementById

Mateus Martinez Rosa · 2 de novembro de 2017

Galera estou começando no javascript agora e não estou conseguindo solucionar meu exercício, podem me ajudar por favor!!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        function CalculaPareImpar() {
            var QtdePar = 0, QtdeImpar = 0, MediaPar = 0, MediaGeral = 0;
            entrada1 = document.getElementById("entrada1").value;
            entrada2 = document.getElementById("entrada2").value;
            p = document.getElementById("ParImpar");
            
            if (isNaN(entrada1)|| isNaN(entrada2)) {
                document.getElementById("msg1").innerHTML = "Informe dois números válidos";
            }
            else
            {
               for (i = entrada1; i <= entrada2; i++) {
                   if (i % 2 == 0) {
                        QtdePar++;
                        MediaPar = QtdePar + QtdePar;
                    }
                   else {
                        QtdeImpar++;
                        MediaImpar = QtdeImpar + QtdeImpar;
                    }
                   MediaGeral = (MediaImpar + MediaPar) / (QtdePar + QtdeImpar);
                }
            }
            conteudo = conteudo + "Quantidade de números pares é: " + QtdePar + "<br/> Quantidade de números ímpares é: " + QtdeImpar + "<br/> Média dos valores pares é: "
                + MediaPar + "<br/> Média geral dos núemros lidos é: " + MediaGeral;
            document.getElementById("msg1").innerHTML = "";
            p.innerHTML = conteudo;
        }
    </script>
</head>
<body>
    <form id="frm2" method="get">
        <fieldset>
            <legend>Calcular números pares e ímpares</legend>
            <input type="text" id="entrada1" name="entrada1" placeholder="Informe o primeiro número..." /><span style="color:red;" id="msg1"></span><br /><br />
            <input type="text" id="entrada2" name="entrada2" placeholder="Informe o segundo número..." /><span style="color:red;" id="msg2"></span><br /><br />
            <input type="button" value="Processar..." onclick="CalculaPareImpar();" />
        </fieldset>
    </form>
    <p id="ParImpar" style="color:blue;">Resultado!</p>
</body>
</html>

iHollyZinhO · 3 de novembro de 2017

Quando estiver programando em JavaScript, recomendo que sempre monitore o console do seu navegador, no caso do Google Chrome, você pode acessá-lo apertando F12. Lá você pode encontrar eventuais mensagens de erro.

No caso do seu código, o console está reportando um erro nessa linha:

conteudo = conteudo + "Quantidade de números pares é: " + QtdePar + "<br/> Quantidade de números ímpares é: " + QtdeImpar + "<br/> Média dos valores pares é: "
                + MediaPar + "<br/> Média geral dos núemros lidos é: " + MediaGeral;

O motivo do erro é que você está tentando concatenar uma variável que está sendo declarada no momento.

Remova o (conteudo +) ou declare da seguinte

var conteudo = "Resultado: ";

Alterando a string pelo nome que você desejar.

Mateus Martinez Rosa · 3 de novembro de 2017

Olá, obrigado pela ajuda, mas não deu muito certo, os valores que não eram para passar pela validação passaram..., e os resultados não estão batendo!! =(

iHollyZinhO · 3 de novembro de 2017

agora, Mateus Martinez Rosa disse:

Olá, obrigado pela ajuda, mas não deu muito certo, os valores que não eram para passar pela validação passaram..., e os resultados não estão batendo!! =(

Encontrei mais uns problemas porque os números estão vindo como string e acaba as vezes não entrando no for. Para consertar isso, você precisa colocar o resultado das entradas multiplicadas por 1 para convertê-las para número.

entrada1 = document.getElementById("entrada1").value*1;
entrada2 = document.getElementById("entrada2").value*1;

Mais uma parte que estava errada era a relação das médias dos pares e ímpares. Se você desejava obter o valor médio dos números pares, deveria ter feito da seguinte forma:

//Alterar dentro do if a variável MediaPar para isto:
MediaPar += i;
//Porque a média dos números é a somatório dos números dividido pela quantidade de números.
//E ao final do loop, você deveria calcular a média da seguinte forma:
MediaPar = MediaPar/QtdePar;

Se desejava fazer isso, deverá trocar a média dos ímpares também da mesma forma. E consequentemente, a MediaGeral também estará correta.

DiF · 4 de novembro de 2017

Uma solução alternativa para contornar o problema como string além da apresentada, é usar a função parseInt().

Veja se é assim que deveria ser:

function CalculaPareImpar() { 
   //Variaveis
   var n1 = parseInt(document.getElementById("entrada1").value);
   var n2 = parseInt(document.getElementById("entrada2").value);  
   var contPar = 0, contImpar = 0, MediaPar = 0, MediaImpar = 0, MediaGeral = 0;
   
   //Testa se é numérico
   if(isNaN(n1) || isNaN(n2)){
       document.getElementById("ParImpar").innerHTML = "Informe dois números válidos";
   }else{
      //Laço de FOR
      for(i= n1; i<= n2; i++){
          //Teste de IF Ternário qtdPAR Média Par qtd Impar e Média impar
          i % 2 == 0 ? (contPar++, MediaPar+=i) : (contImpar++, MediaImpar+=i);
      }
      
      //Calculos de médias
       MediaPar = MediaPar/contPar;
       MediaImpar = MediaImpar/contImpar;
       MediaGeral = (contPar + contImpar) / (MediaPar + MediaImpar);
      
      //Armazena a string de resultado que será exibido
      var resultado = "Total de Pares: " + contPar +
      		      "</br>Total de Ímpares: " + contImpar+
                      "<br/> Média de Pares: " + MediaPar+
                      "</br>Média de Ímpares: "+ MediaImpar+
                      "</br>Média Geral: "+ MediaGeral.toFixed(2);
                      
       //Insere o resultado no elemento desejado               
      document.getElementById("ParImpar").innerHTML = resultado;     
   }  
}