Somar valores em JavaScript

Front-end

18/04/2013

Olá, galera.
Tenho a seguinte função em JavaScript:

<script type="text/javascript">
	function somarValores(){
		var s1 = document.getElementById("txt1").value;
		var s2 = document.getElementById("txt2").value;
		var s3 = s1*s2;
		alert(s3);
	}
</script>

E os seguintes campos em HTML:

<fieldset>
	<legend>Cálculo do salário</legend>
	<label>Valor 1:</label>
	<input id="txt1" type="text"/>
	<label>Valor 2: </label>
	<input id="txt2" type="text"/>
	<button id="somar" onclick="somarValores()">Somar</button>
</fieldset>

A ideia era digitar um valor em cada input e mostra a soma dos dois. Só que ao invés de somar, está juntando os dois valores. Por exemplo, se digitar 1 e 2, ao invés de dar 3, tá dando 12.

Testei com as outras operações (multiplicação, divisão e subtração) e deu certo. Só não dá com a soma.

Como estou começando com JavaScript, não consigo entender o que está havendo.

Se alguém puder me ajudar, eu agradeço.

Carlos Andriê

Curtidas 1

Melhor post

William

18/04/2013

A dúvida do colega Carlos é pertinente, vamos a respota da necessidade do "parseInt".

Quando vamos trabalhar com operações matemáticas (/, * e -) em javascript geralmente aplicamos o sinal entre os valores e pronto, vamos ter um resultado da operação selecionada.

Exemplo:

x / y = n
x * y = n
x - y = n

Mas quando se trata da soma (+), temos que imaginar que para concatenar strings também usamos o sina de "+", então temos que converter explicitamente os valores em números, para que não ocorra uma concatenação:

Exemplo:

2 + 2 = 22
parseint(2) + parseint(2) = 4

Espero ter ajudado ...

GOSTEI 6

Mais Respostas

Carlos Andriê

18/04/2013

Ah, não liguem para os textos e nomes das variáveis, é que como estou testando, não estou ligando para esses detalhes, aí aproveito o mesmo código para vários exemplos.

Obrigado.

GOSTEI 0

Carlos Andriê

18/04/2013

Falha minha, acabei copiando o código com a multiplicação. Na verdade o problema é com a soma, então o código é esse:

function somarValores(){
var s1 = document.getElementById("txt1").value;
var s2 = document.getElementById("txt2").value;
var s3 = s1 + s2;
alert(s3);
}

GOSTEI 0

Roniere Almeida

18/04/2013

ufa, quase que não consigo, hehehe,

pesquisei um pouco e fazendo alguns testes, notei que vc deve utilizar "parseInt" nas variaveis(javascript)

veja o codigo:

<html>
<head>
	<script type="text/javascript">
		function somarValores(){
		var s1 = document.getElementById("s1").value;
		var s2 = document.getElementById("s2").value;
		var s3 = parseInt(s1) + parseInt(s2);
		alert(s3);
	}
	</script>
</head>
<body>
	<fieldset>
		<legend>Cálculo do salário</legend>
		<label>Valor 1:</label>
		<input id="s1" type="text"/>
		<label>Valor 2: </label>
		<input id="s2" type="text"/>
		<button id="somar" onclick="somarValores()">Somar</button>
	</fieldset>

</body>
</html>

GOSTEI 3

Carlos Andriê

18/04/2013

Realmente deu certo, Roniere. Muito obrigado mesmo.
Mas não entendi por que com as outras operações dá certo. Sem querer abusar, vocÊ saberia me dizer o motivo?
Grato.

GOSTEI 0

Roniere Almeida

18/04/2013

acabei pesquisando isso, mas sem sucesso, me desculpe.

GOSTEI 0

Roniere Almeida

18/04/2013

Realmente deu certo, Roniere. Muito obrigado mesmo.
Mas não entendi por que com as outras operações dá certo. Sem querer abusar, vocÊ saberia me dizer o motivo?
Grato.

ahhh, de nada, precisando, estamos aqui para ajudar!!!

GOSTEI 0

Joel Rodrigues

18/04/2013

Perfeita a resposta do William. Apenas gostaria de complementar com o seguinte:
Resumidamente, JavaScript, diferente da maioria das linguagens server-side/back-end, não tem uma tipagem forte, ou seja, não é necessário declarar o tipo de variável como int, decimal, string, etc. Apenas var permite a utilização de vários tipos de dado.
Por isso ocorre o que o colega citou acima. Quando você passa os valores dos inputs (que são textos) para as variáveis s1 e s2, elas são consideradas texto, a menos que seja efetuada uma operação como multiplicação, que explicita que aqueles são valores numéricos.
Um abraço a todos.

GOSTEI 1

Carlos Andriê

18/04/2013

Cara, perfeito. Agora sim eu entendi.
Muito obrigado a todos pela ajuda, Roniere, wllfl e Joel.
A questão está resolvida e muito bem explicada.

GOSTEI 1

Joel Rodrigues

18/04/2013

Valeu, Carlos.
Estou então marcando este tópico como Concluído.

GOSTEI 0

POSTAR