Cómo forzar a JS a hacer matemáticas en lugar de juntar dos cadenas

102

Necesito javascript para agregar 5 a una variable entera, pero en su lugar trata la variable como una cadena, por lo que escribe la variable, luego agrega 5 al final de la "cadena". ¿Cómo puedo obligarlo a hacer matemáticas?

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

Salida: 55

¿Cómo puedo forzar su salida 10?

Sean
fuente
3
Este ejemplo en particular da como resultado 10.
deceze
10
Ha colocado una carga indebida en aquellos que quieren ayudarlo al descargar todo su código sin hacer ningún intento de reducirlo. Pruébelo usted mismo ... ¿Los atributos de CSS #controlhacen alguna diferencia en su problema? Si no es así, bórrelos y no nos los muestre. Continúe reduciendo su código hasta que tenga el caso de prueba mínimo absoluto necesario para reproducir su problema. La mayoría de las veces, hacerlo hará que encuentre el problema y aprenda en el proceso. Si no lo resuelve usted mismo, es muy probable que obtenga ayuda rápida con su ejemplo simple.
Phrogz

Respuestas:

108

Tienes la linea

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

en su archivo, esto hará que los puntos sean una cadena porque el contenido de txt no está restringido a un número.

para convertirlo en un int cambie la línea a:

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

Nota: 10Aquí se especifica decimal (base-10). Sin esto, es posible que algunos navegadores no interpreten la cadena correctamente. Ver MDN: parseInt.

Alex
fuente
3
atajo ... puntos = + document.getElementById ("txt"). valor
Tracker1
5
parseInt (..., 10) también, siempre use una base ... una verificación de cordura ... si (! puntos || puntos <1) también puede estar en orden ...
Tracker1
1
Operador de incremento de uso mejor para Adición. como VARIABLE ++ en lugar de VAR = VAR + 1;
gnganpath
54

lo más simple:

dots = dots*1+5;

los puntos se convertirán en números.

mier
fuente
34
Incluso más simple de lo que sería dots = +dots+5.
Andy E
9

Estoy agregando esta respuesta porque no la veo aquí.

Una forma es poner un carácter '+' delante del valor

ejemplo:

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

x === 15

He descubierto que esta es la forma más sencilla

En este caso, la línea:

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

podría cambiarse a

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

para forzarlo a un número

NOTA:

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

parseInt() debería hacer el truco

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

Te dio

sum == 35
pin == "2510"

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

Nota: La 10en parseInt(number, 10)especifica decimal (base-10). Sin esto, es posible que algunos navegadores no interpreten la cadena correctamente. Ver MDN: parseInt.

Alan L.
fuente
3

Esto también funciona para ti:

dots -= -5;
Holger.Buick
fuente
genial, no tenemos que reescribir la primera var
bormat
1

es realmente simple solo

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

esto obliga a que javascript se multiplique porque no hay confusión para * iniciar sesión en javascript.

Nelson Cajetin Diego Alfonso
fuente
1

Puede agregar + detrás de la variable y la obligará a ser un número entero

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

Después de probar la mayoría de las respuestas aquí sin éxito para mi caso particular, se me ocurrió esto:

dots = -(-dots - 5);

Los signos + son los que confunden a js, y esto los elimina por completo. Simple de implementar, aunque potencialmente confuso de entender.

Jay Reeve
fuente
-3

ACTUALIZADO desde la última vez que se votó en contra ...

Solo vi la porción

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

antes, pero luego se me mostró que la txtcaja alimenta la variable dots. Debido a esto, deberá asegurarse de "limpiar" la entrada, para asegurarse de que solo tenga números enteros y no código malicioso.

Una forma fácil de hacerlo es analizar el cuadro de texto con un onkeyup()evento para asegurarse de que tenga caracteres numéricos:

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

donde el evento daría un error y borraría el último carácter si el valor no es un 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, también podrías hacer eso con expresiones regulares, pero tomé el camino perezoso.

Desde entonces, sabría que solo los números podrían estar en el cuadro, debería poder usar eval():

dots = eval(dots) + 5;
vapcguy
fuente
2
eval()es peligroso si dotsproviene de la entrada del usuario, especialmente si proviene de la entrada almacenada. Más información
Chad Levy
@ChadLevy Gracias por el enlace, una buena lectura, y por mencionar esto, pero en este caso la preocupación no fue justificada, ya que no fue por la entrada del usuario. dotsera una variable definida que se incrementaba y se confundía con una cadena. Así que calificaré mi respuesta de que no debe usarse a la ligera, como dijiste, a partir de la entrada almacenada / del usuario que podría tener el potencial de una inyección de scripts malvados. Pero también en este caso, dicha inyección causaría un error / excepción matemática, de todos modos, por lo que realmente no haría nada, de cualquier manera.
vapcguy
Para aquellos que votan negativamente porque creen que eval()es muy peligroso, deben mirar el código en el contexto que estaba usando el OP. No es, en este caso, porque está usando una entrada que no proviene de un cuadro de texto o de cualquier otra forma de entrada del usuario donde podría haber alguna forma de inyección de un valor no numérico. ¡Ojalá pudiera rechazar sus votos negativos!
vapcguy
Otro votante negativo. ¿Te importaría explicarte, en lugar de ser solo una oveja? Hay momentos en los que eval()está bien y necesitas mirar el contexto en el que se está usando, en lugar de creer ciegamente todo lo que lees sin entenderlo realmente.
vapcguy
1
@ChadLevy Ok, en ese sentido, tienes razón. No miré esa sección; me concentré en lo que puso en la parte superior de la página: el código var dots = 5 function increase(){ dots = dots+5; }no usa un campo de texto y asigna usando variables directas, no desde la entrada del usuario. Así que de eso me salí. Pero vi que tienes razón de que está asignando dicho campo de texto txta dots, y dotses una variable global, por lo que se actualiza por esa entrada. Tienes razón. Gracias.
vapcguy