Como forçar JS a fazer matemática em vez de colocar duas cordas juntas

102

Eu preciso de javascript para adicionar 5 a uma variável inteira, mas em vez disso ele trata a variável como uma string, então escreve a variável e, em seguida, adiciona 5 no final da "string". Como posso forçá-lo a fazer matemática em vez disso?

var dots = document.getElementById("txt").value; // 5
function increase(){
    dots = dots + 5;
}

Resultado: 55

Como posso forçar a saída 10?

Sean
fonte
3
Este exemplo específico produz 10.
deceze
10
Você colocou um fardo indevido sobre aqueles que desejam ajudá-lo, despejando todo o seu código sem fazer qualquer tentativa de reduzi-lo. Teste você mesmo ... os atributos CSS para #controlfazem alguma diferença no seu problema? Caso contrário, exclua-os e não os mostre para nós. Continue reduzindo seu código até que você tenha o caso de teste mínimo absoluto necessário para reproduzir seu problema. Na maioria das vezes, isso fará com que você encontre o problema e aprenda no processo. Se você não resolver sozinho, é muito provável que obtenha ajuda rápida com seu exemplo simples.
Phrogz

Respostas:

108

Você tem a linha

dots = document.getElementById("txt").value;

em seu arquivo, isso definirá os pontos como uma string porque o conteúdo do txt não está restrito a um número.

para convertê-lo em um int, altere a linha para:

dots = parseInt(document.getElementById("txt").value, 10);

Nota: O 10aqui especifica decimal (base 10). Sem isso, alguns navegadores podem não interpretar a string corretamente. Veja MDN: parseInt.

Alex
fonte
3
shortcut ... dots = + document.getElementById ("txt"). value
Tracker1
5
parseInt (..., 10) também, sempre use um radix ... uma verificação de sanidade ... if (! dots || dots <1) pode estar em ordem também ...
Tracker1
1
Melhor usar o operador de incremento para adição. como VARIABLE ++ em vez de VAR = VAR + 1;
gnganpath
54

o mais simples:

dots = dots*1+5;

os pontos serão convertidos em números.

Mier
fonte
34
Ainda mais simples do que isso seria dots = +dots+5.
Andy E
20

NÃO SE ESQUEÇA - Use parseFloat();se você estiver lidando com decimais.

Nicolas
fonte
2
E não se esqueça de que float não é um tipo de dados decimal stackoverflow.com/questions/588004/…
Tedd Hansen
Basta usar Number.
user4642212
9

Estou adicionando esta resposta porque não a vejo aqui.

Uma maneira é colocar um caractere '+' na frente do valor

exemplo:

var x = +'11.5' + +'3.5'

x === 15

Eu descobri que esta é a maneira mais simples

Neste caso, a linha:

dots = document.getElementById("txt").value;

pode ser alterado para

dots = +(document.getElementById("txt").value);

forçar a um número

NOTA:

+'' === 0
+[] === 0
+[5] === 5
+['5'] === 5
Christopher Strolia-Davis
fonte
8

parseInt() deve fazer o truque

var number = "25";
var sum = parseInt(number, 10) + 10;
var pin = number + 10;

Da-te

sum == 35
pin == "2510"

http://www.w3schools.com/jsref/jsref_parseint.asp

Nota: O 10in parseInt(number, 10)especifica decimal (base 10). Sem isso, alguns navegadores podem não interpretar a string corretamente. Veja MDN: parseInt.

Alan L.
fonte
3

Isso também funciona para você:

dots -= -5;
Holger.Buick
fonte
ótimo, não temos que reescrever a primeira var
bormat
1

é realmente simples, apenas

var total = (1 * yourFirstVariablehere) + (1 * yourSecondVariablehere)

isso força o javascript a se multiplicar porque não há confusão para * sign in javascript.

Nelson Cajetin Diego Alfonso
fonte
1

Você pode adicionar + atrás da variável e isso a forçará a ser um número inteiro

var dots = 5
    function increase(){
        dots = +dots + 5;
    }
Hassan Ali Salem
fonte
1

Depois de tentar a maioria das respostas aqui sem sucesso para meu caso específico, eu vim com o seguinte:

dots = -(-dots - 5);

Os sinais + são o que confundem js, e isso os elimina completamente. Simples de implementar, embora potencialmente confuso para entender.

Jay Reeve
fonte
-3

ATUALIZADO desde a última votação negativa ....

Eu só vi a porção

var dots = 5
function increase(){
    dots = dots+5;
}

antes, mas depois me foi mostrado que a txtcaixa alimenta a variáveldots . Por causa disso, você precisará ter certeza de "limpar" a entrada, para ter certeza de que ela contém apenas números inteiros, e não código malicioso.

Uma maneira fácil de fazer isso é analisar a caixa de texto com um onkeyup()evento para garantir que ela tenha caracteres numéricos:

<input size="40" id="txt" value="Write a character here!" onkeyup="GetChar (event);"/>

onde o evento forneceria um erro e limparia o último caractere se o valor não for um número:

<script type="text/javascript">
    function GetChar (event){
        var keyCode = ('which' in event) ? event.which : event.keyCode;
        var yourChar = String.fromCharCode();
        if (yourChar != "0" &&
            yourChar != "1" &&
            yourChar != "2" &&
            yourChar != "3" && 
            yourChar != "4" &&
            yourChar != "5" &&
            yourChar != "6" && 
            yourChar != "7" &&
            yourChar != "8" && 
            yourChar != "9")
        {
            alert ('The character was not a number');
            var source = event.target || event.srcElement;
            source.value = source.value.substring(0,source.value-2);
        }
    }
</script>

Obviamente, você também pode fazer isso com regex, mas escolhi o caminho mais preguiçoso.

Desde então, você saberia que apenas números podem estar na caixa, você deve ser capaz de usar apenas eval():

dots = eval(dots) + 5;
vapcguy
fonte
2
eval()é perigoso se dotsfor da entrada do usuário, principalmente se for da entrada armazenada. Mais informações
Chad Levy
@ChadLevy Obrigado pelo link - uma boa leitura - e por trazer isso à tona, mas neste caso a preocupação era injustificada, uma vez que não era a entrada do usuário. dotsera uma variável definida que estava sendo incrementada e apenas sendo confundida com uma string. Portanto, qualificarei minha resposta de que não deve ser usado levianamente, como você disse, a partir de entradas armazenadas / do usuário que podem ter o potencial para injeção de script maligno. Mas também neste caso, tal injeção causaria um erro / exceção matemático de qualquer maneira, então realmente não faria nada, de qualquer maneira.
vapcguy
Para aqueles que votam contra você porque acham que eval()é muito perigoso, você precisa examinar o código no contexto que o OP estava usando. Não é, neste caso, porque ele está usando uma entrada que não vem de uma caixa de texto ou qualquer outra forma de entrada do usuário onde poderia haver qualquer forma de injeção de um valor não numérico! Eu gostaria de poder votar negativamente em seus votos negativos!
vapcguy
Outro downvoter. Importa-se de se explicar, em vez de ser apenas uma ovelha? Há momentos em que eval()está tudo bem e você precisa olhar para o contexto em que está sendo usado, em vez de apenas acreditar cegamente em tudo o que lê sem realmente entender!
vapcguy
1
@ChadLevy Ok, nesse ponto, você está certo. Eu não olhei para aquela seção - estava focado no que ele colocou no topo da página: o código var dots = 5 function increase(){ dots = dots+5; }não usa um campo de texto e atribui usando variáveis ​​diretas, não da entrada do usuário. Então foi disso que eu saí. Mas eu vi que você está certo ao dizer que ele está atribuindo esse campo de texto txta dots, e dotsé uma variável global, e é atualizado por essa entrada. Você está certo. Obrigado.
vapcguy