Fórum Somar valores em JavaScript #440126

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ê

Curtir tópico

+ 1

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

William

Responder

Gostei + 6

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

Gostei + 0

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

Gostei + 0

18/04/2013

Roniere Almeida

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

Gostei + 3

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

Gostei + 0

18/04/2013

Roniere Almeida

acabei pesquisando isso, mas sem sucesso, me desculpe.

Responder

Gostei + 0

18/04/2013

Roniere Almeida

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

Gostei + 0

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

Gostei + 1

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

Gostei + 1

18/04/2013

Joel Rodrigues

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

Responder

Gostei + 0