Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Duvida

Fiz um código para calcular media aritmética e nao sei pq o navegador está concatenando o resultado. Segue o código:

<meta charset="UTF-8">

<h1> Boletim </h1>

Digite as notas da AV1 e da AV2 nos campos abaixo:
<br><br>
<input type="text" class="notaUm">
<br><br>
<input type="text" class="notaDois">
<br><br>
<button> Enviar </button>

<script>

function calculaMedia(a, b) {

    var resultado = (a + b) / 2;
    return resultado;
}


var inputUm = document.querySelector("input.notaUm");
var inputDois = document.querySelector("input.notaDois");
var button = document.querySelector("button");

button.onclick = function() {


    alert("A média do aluno é " + calculaMedia(inputUm.value, inputDois.value));

    var media = calculaMedia(inputUm.value, inputDois.value);;

    if(media < 6) {

        alert("O aluno está reprovado!"); 
    } else { 
        alert("O aluno está aprovado!");
    }
}


</script>

Ao colocar nos input's 20 e 30, por exemplo, o alert mostra 1015 (creio que venha de 20/2 concatenado à 30/2. Porque isso está acontecendo se eu usei parênteses na soma?

5 respostas
solução!

Olá Juliana, tudo bem?

Olha, o que tu precisa fazer, nesse caso é "forçar" que os valores de a e b sejam considerados como números, para o cálculo acontecer. Uma das formas de você fazer isso é multiplica-los por 1, dentro da sua função calculaMedia.

Fica, mais ou menos, assim:

function calculaMedia(a, b) {
    var resultado = ((a*1 + b*1) / 2);
    return resultado;
}

Vale observar que, como você não fez nenhum filtro sobre o campo de entrada, o usuário pode colocar uma letra ou algum caractere "não numérico".

Para mitigar essas questões, você pode utilizar soluções mais robustas para conversão do dado. Por exemplo:

function calculaMedia(a, b) {
    var num_a = parseInt(a);
    var num_b = parseInt(b);
    var resultado = ((num_a  + num_b ) / 2);
    return resultado;
}

ou

function calculaMedia(a, b) {
    var num_a = parseFloat(a);
    var num_b = parseFloat(b);
    var resultado = ((num_a  + num_b ) / 2);
    return resultado;
}

Oii, George, obrigada! Testei das maneiras que você explicou e deu certo. Sempre que os valores dependerem do que o usuário vai colocar, eu devo filtrar? Pq me lembro que nas aulas anteriores, no cálculo de IMC, por exemplo, não havia essa necessidade, mas também era o próprio desenvolvedor que atribuía um valor.

Juliana, por experiência, o usuário sempre tende a fazer errado. O ideal é você tentar deixar as instruções claras e, quando possível, implementar algum tipo de controle sobre o dado fornecido.

Como estamos em ambiente de aprendizagem, normalmente, essas etapas são suprimidas. Até para não perder muito tempo... Mas, no mercado, é importante que você tenha as etapas do processo sob seu controle.

Claro que essa é a minha opinião...

Hmm, entendi. Muito obrigada!! :)

Juliana, no caso do IMC a gente não precisava fazer isso porque incluía operações matemáticas com números (no caso era o peso da pessoa) mas isso só considerando que a tendência é a pessoa colocar apenas um número inteiro, ex.: 70 ou 65 MAS, validando a regra que George comentou, haha que "o usuário tende a fazer errado", quando mostrei para minha namorada calcular o seu próprio IMC foi BATATA: ela colocou lá o peso com gramas e usou vírgula, o que deu um resultado NaN. hahaha por isso eu gosto de sempre pedir pra ela usar os programas depois que eu "parei de mexer" e considero pronto, o olhar de outra pessoa sempre traz exceções ao nosso raciocínio e mostra que podemos fazer alterações para evitar erros que nem tínhamos previsto :D