12

Estou tentando somar dois números que recebo das inputs. Infelizmente, recebo os valores como strings causando o problema de concatenação ("1" + "1" = "11"). Estou começando a aprender JS então queria saber como converter as strings recebidas para int.

function somar(a, b) {
  var result = a + b;
  document.getElementById("demo").innerHTML = result;
  alert(typeof(a) + " " + typeof(b));
}
<input type="number" id="myinput1">
<input type="number" id="myinput2">
<button type="button" onclick="somar(inputvalue1,inputvalue2)">Somar</button>
<p id="demo">Soma entre os valores colocados aqui</p>
<script>
  var inputvalue1 = document.getElementById('myinput1').value;
  var inputvalue2 = document.getElementById('myinput2').value;
</script>

4 Respostas 4

15

Da seguinte forma abaixo usando a função nativa parseInt do JavaScript, você pode converter uma string para um int:

var number1 = parseInt('10'),
    number2 = parseInt('100'),
    result = number1 + number2; // Resultado: 110

Opcionalmente você também pode passar um segundo parâmetro na função parseInt, que indica qual sistema numérico que você quer que seja convertido, por exemplo convertendo para a base decimal:

Convertendo para base decimal:

var number1 = parseInt('21', 10),
    number2 = parseInt('30', 10),
    result = number1 + number2; // Resultado: 51

Convertendo para base binária:

var number1 = parseInt('011', 2), // 3 em decimal
    number2 = parseInt('010', 2), // 2 em decimal
    result = number1 + number2; // 5 em decimal

Outra opção para conversão seria utilizando a classe Number, da seguinte forma:

var number1 = Number("10"),
    number2 = Number("10"),
    result = number1 + number2;//20

Porém, utilizando ela quando existe algum caractere de texto, a conversão retorna NaN - Not A Number (não é um número), por exemplo:

var number1 = Number("10a"), // NaN
    number2 = Number("10"), // 10
    result = number1 + number2; // NaN

Enquanto usando parseInt, ela trataria a string e converteria o "10a" para "10", como no exemplo:

var number1 = parseInt("10a"), // 10
    number2 = parseInt("10"), // 10
    result = number1 + number2; // 20

No seu caso poderia ficar assim:

var inputvalue1 = parseInt(document.getElementById('myinput1').value);
var inputvalue2 = parseInt(document.getElementById('myinput2').value);

Solução que poderia ser aplicada no seu código:

function somar(a, b) {
  var inputvalue1 = parseInt(a.value),
    inputvalue2 = parseInt(b.value),
    result = inputvalue1 + inputvalue2;

  document.getElementById('demo').innerHTML = result;
}
<input type="number" id="myinput1">
<input type="number" id="myinput2">
<button type="button" onclick="somar(myinput1, myinput2)">Somar</button>
<p id="demo">Soma entre os valores colocados aqui</p>

Outro solução sem uso de paramêtros na função somar:

function somar() {
  var inputvalue1 = parseInt(document.getElementById('myinput1').value),
    inputvalue2 = parseInt(document.getElementById('myinput2').value),
    result = inputvalue1 + inputvalue2;

  document.getElementById('demo').innerHTML = result;
}
<input type="number" id="myinput1">
<input type="number" id="myinput2">
<button type="button" onclick="somar()">Somar</button>
<p id="demo">Soma entre os valores colocados aqui</p>

Lembrando que, para uma maior segurança, seria melhor fazer um tratamento nos dados de entrada vindos dos inputs, pois assim evitaria a execução do cálculo com entradas que não sejam números. Por exemplo:

var number = 'text';

if (!isNaN(number)) {
   alert('É número!');
} else {
   alert('Não é número!');
}
3
  • 1
    O exemplo de tratamento de erro falha para a entrada '0'. parseInt retorna NaN em caso de falha na conversão, então prefira usar a função isNaN no teste do seu if, que foi feita para testar isso. Commented 11/06/2016 às 0:41
  • Obrigado ajudou muito!Mas é necessário me referir ao valor do a var inputvalue1= parseInt(a.value),... mesmo tendo me referido a ele antes?var inputvalue1 = document.getElementById('myinput1').value;
    – user48589
    Commented 11/06/2016 às 1:01
  • Dar para fazer das duas formas usando com os paramêtros a e b da forma que eu fiz, ou sem paramêtros, usando document.getElementById('myinput1').value dentro da função para pegar os valores dos input's. Commented 11/06/2016 às 1:08
8

Podes realizar a conversão da seguinte forma:

Se o valor é um inteiro:

var x = parseInt("1000", 10);

ou

Number("1000");

Se o valor contém ou pode conter casas decimais:

var x = Math.floor("1000.01");

Exemplo para testes:

function somar() {
  var inputvalue1 = Number(document.getElementById('myinput1').value);
  var inputvalue2 = Number(document.getElementById('myinput2').value);
  alert(inputvalue1 + inputvalue2);
}
<input type="number" id="myinput1">
<input type="number" id="myinput2">
<button type="button" onclick="somar()">Somar</button>

0

Voce também pode converter uma String para Number inteiro assim:

~~"123.213" // => 123
-2

// Temos aqui um exemplo onde:
let result = (7 + 13) / (9 + 7);
let result2 = 100 / (2 * 6);
let finalResult = (result * result2);
typeof finalResult; // retorna 'string'

// então podemos:
if (typeof finalResult === "string"){
    finalNumber = Number(finalResult);
} else
    finalNumber = finalResult;
console.log(finalNumber);
/*Neste caso, Atribuímos a variável alvo o valor  "Number(finalResult)", isto é o valor finalResult vai ser convertido para Number.*/

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