1

Preciso monta um código em HTML x Javascript, com dois campos para digitação de valores numéricos e um botão de calcular. Ao pressionar o botão calcular, a aplicação deverá emitir na tela o resultado da soma dos dois valores digitados. não estou conseguindo fazer a validação no javascript.

3
  • Se possível clique em editar e poste seu código. 14/04/2018 às 18:33
  • Provavelmente o que tu queres não é validação e sim converter os valores para int ou float. 14/04/2018 às 18:34
  • e como faço isso
    – andreia
    14/04/2018 às 18:43

3 Respostas 3

1

Por padrão, todos os valores dos inputs vêm em como string, veja:

document.getElementById('check').addEventListener('click', function() {
  var field = document.getElementById('input');
  
  // Mostra o valor e em seguida o tipo:
  alert(field.value);
  alert(typeof field.value);
});
<input id="input" type="number" value="44" />
<button id="check">Clique</button>

Desse modo, precisamos transformar o valor do campo em um número.

var numberInString = '20';
var number = Number(numberInString);

console.log(typeof number); // number

Assim, creio que o que o senhor precisa seja:

document.getElementById('calc-sum').addEventListener('click', function() {
  var num1 = document.getElementById('num-1');
  var num2 = document.getElementById('num-2');
  
  // Transformar os valores em números:
  num1 = Number(num1.value);
  num2 = Number(num2.value);
  
  // Calcular a soma:
  var sum = num1 + num2;
  
  // Mostrar a soma:
  document.getElementById('sum').innerText = 'A soma é: ' + sum;
});
<label>Valor 01: </label>
<input id="num-1" type="number" />
<br>
<label>Valor 01: </label>
<input id="num-2" type="number" />
<br><br>
<input type="button" id="calc-sum" value="Calcular soma">
<br><br>
<div id="sum"></div>

Nota:

Para converter as strings para números, usei o construtor Number().
Mas também poderia-se ter usado os métodos parseInt() ou parseFloat().

2
  • valeu mesmo conseguir
    – andreia
    14/04/2018 às 18:59
  • nulo + nulo não é zero
    – user60252
    14/04/2018 às 19:18
1

Partindo do principio que o resultado da soma de (vazio + vazio) ou (nulo + nulo) ou ( e + e ) ou ( espaços + espaços ) não é zero, temos

    function validarNum() {
        var x, texto;

        // Obtem os valores dos campos de entrada com id = "numero"
        x = document.getElementById("numero1").value;
        y = document.getElementById("numero2").value;
        
        z = (parseFloat(x)+parseFloat(y));

        if (isNaN(z)) {
            texto = "Sr. Burro, preencha os campos corretamente";
        } else {
            texto = (parseFloat(x)+parseFloat(y));
        }
        console.log(texto);
    }
    <input id="numero1">
    
    <input id="numero2">

    <button type="button" onclick="validarNum()">Somar</button>

2
  • Gostei do Sr. Burro :D
    – Isac
    14/04/2018 às 22:33
  • Removi aquela resposta lá dos bodes. Achei que não valia a pena porque o problema deve ser essencialmente no PHP: pt.stackoverflow.com/q/291375/8063
    – Sam
    15/04/2018 às 5:33
0

Como dito na resposta do @Luiz Felipe, é preciso converter o valor dos campos para tipo numérico. No caso aqui usei parseFloat().

Além disso, você pode usar um avaliador de curto-circuito para converter algum o campo que foi deixado vazio em 0, para evitar o NaN.

Exemplo:

function calcular(){
   var val1 = parseFloat(document.body.querySelector("#valor1").value) || 0;
   var val2 = parseFloat(document.body.querySelector("#valor2").value) || 0;
                                                                       // ↑
       // caso o campo esteja vazio ou não seja um número, o valor assume 0
   console.log(val1+val2);
}
Insira os dois valores (deixe um em branco para testar a soma):
<br>
<input id="valor1">
<input id="valor2">
<br>
<button type="button" onclick="calcular()">Calcular</button>

4
  • muito obrigado.
    – andreia
    14/04/2018 às 18:59
  • muito bom!sou nova nesse mundo de programação rsrs
    – andreia
    14/04/2018 às 19:02
  • @LeoCaracciolo É só para evitar o NaN.
    – Sam
    14/04/2018 às 19:20
  • @LeoCaracciolo Concordo contigo. Mas como coloquei na resposta, é apenas para converter o nulo em zero, foi só uma sugestão.
    – Sam
    14/04/2018 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .