Somar valores em JavaScript

18/04/2013

92

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.
Responder

Post mais votado

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 ...
Responder

Mais Posts

18/04/2013

Carlos Andriê

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.
Responder

18/04/2013

Carlos Andriê

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);
}
Responder
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>

Responder

18/04/2013

Carlos Andriê

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.
Responder
acabei pesquisando isso, mas sem sucesso, me desculpe.
Responder
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!!!
Responder

18/04/2013

Joel Rodrigues

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.
Responder

18/04/2013

Carlos Andriê

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.
Responder

18/04/2013

Joel Rodrigues

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