Comment forcer JS à faire des maths au lieu de mettre deux chaînes ensemble

102

J'ai besoin de javascript pour ajouter 5 à une variable entière, mais à la place, il traite la variable comme une chaîne, donc il écrit la variable, puis ajoute 5 à la fin de la "chaîne". Comment puis-je le forcer à faire des maths à la place?

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

Production: 55

Comment puis-je le forcer à sortir 10?

Sean
la source
3
Cet exemple particulier
génère
10
Vous avez imposé un fardeau indu à ceux qui veulent vous aider en vidant tout votre code sans tenter de le réduire. Testez-le vous-même ... les attributs CSS pour #controlfaire une différence sur votre problème? Sinon, supprimez-les et ne nous les montrez pas. Continuez à réduire votre code jusqu'à ce que vous disposiez du scénario de test minimum absolu nécessaire pour reproduire votre problème. La plupart du temps, cela vous amènera à trouver le problème et à apprendre dans le processus. Si vous ne le résolvez pas vous-même, vous obtiendrez probablement une aide rapide avec votre exemple simple.
Phrogz

Réponses:

108

Vous avez la ligne

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

dans votre fichier, cela définira les points comme une chaîne car le contenu de txt n'est pas limité à un nombre.

pour le convertir en int, changez la ligne en:

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

Remarque: 10ici spécifie décimal (base-10). Sans cela, certains navigateurs peuvent ne pas interpréter correctement la chaîne. Voir MDN: parseInt.

Alex
la source
3
raccourci ... dots = + document.getElementById ("txt"). value
Tracker1
5
parseInt (..., 10) aussi, utilisez toujours un radix ... un contrôle de santé ... si (! dots || dots <1) peut être en ordre aussi ...
Tracker1
1
Mieux vaut utiliser l'opérateur d'incrémentation pour l'addition. comme VARIABLE ++ au lieu de VAR = VAR + 1;
gnganpath
54

le plus simple:

dots = dots*1+5;

les points seront convertis en nombre.

mier
la source
34
Encore plus simple que cela ne le serait dots = +dots+5.
Andy E
20

N'OUBLIEZ PAS - À utiliser parseFloat();si vous traitez avec des décimales.

Nicolas
la source
2
Et n'oubliez pas que float n'est pas un type de données décimal stackoverflow.com/questions/588004/…
Tedd Hansen
Utilisez simplement Number.
user4642212
9

J'ajoute cette réponse parce que je ne la vois pas ici.

Une façon est de mettre un caractère «+» devant la valeur

exemple:

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

x === 15

J'ai trouvé que c'était le moyen le plus simple

Dans ce cas, la ligne:

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

pourrait être changé en

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

pour le forcer à un nombre

REMARQUE:

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

parseInt() devrait faire l'affaire

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

Vous donne

sum == 35
pin == "2510"

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

Remarque: le 10in parseInt(number, 10)spécifie décimal (base-10). Sans cela, certains navigateurs peuvent ne pas interpréter correctement la chaîne. Voir MDN: parseInt.

Alan L.
la source
3

Cela fonctionne également pour vous:

dots -= -5;
Holger.Buick
la source
super, nous n'avons pas à réécrire la première var
bormat
1

c'est vraiment simple juste

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

cela oblige javascript à se multiplier car il n'y a pas de confusion pour * sign in javascript.

Nelson Cajet à Diego Alfonso
la source
1

Vous pouvez ajouter + derrière la variable et cela la forcera à être un entier

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

Après avoir essayé la plupart des réponses ici sans succès pour mon cas particulier, j'ai trouvé ceci:

dots = -(-dots - 5);

Les signes + sont ce qui confond js, et cela les élimine complètement. Simple à mettre en œuvre, même s'il est potentiellement déroutant à comprendre.

Jay Reeve
la source
-3

MIS À JOUR depuis le dernier vote négatif ...

Je n'ai vu que la portion

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

avant, mais on m'a montré plus tard que la txtboîte alimente la variable dots. Pour cette raison, vous devrez être sûr de "nettoyer" l'entrée, pour être sûr qu'elle ne contient que des entiers et non du code malveillant.

Un moyen simple de le faire est d'analyser la zone de texte avec un onkeyup()événement pour s'assurer qu'elle contient des caractères numériques:

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

où l'événement donnerait une erreur et effacerait le dernier caractère si la valeur n'est pas un nombre:

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

De toute évidence, vous pouvez le faire avec regex, mais j'ai choisi la voie paresseuse.

Depuis lors, vous sauriez que seuls les nombres peuvent être dans la boîte, vous devriez pouvoir simplement utiliser eval():

dots = eval(dots) + 5;
vapcguy
la source
2
eval()est dangereux s'il dotsprovient d'une entrée utilisateur, en particulier s'il s'agit d'une entrée stockée. Plus d'informations
Chad Levy
@ChadLevy Merci pour le lien - une bonne lecture - et pour en parler, mais dans ce cas, la préoccupation était injustifiée, car elle ne provenait pas de l'entrée de l'utilisateur. dotsétait une variable définie qui était incrémentée et qui était juste confondue avec une chaîne. Je vais donc nuancer ma réponse selon laquelle il ne devrait pas être utilisé à la légère, comme vous l'avez dit, à partir d'une entrée utilisateur / stockée qui pourrait avoir le potentiel d'injection de script maléfique. Mais aussi dans ce cas, une telle injection provoquerait de toute façon une erreur / exception mathématique, donc ça ne ferait vraiment rien, de toute façon.
vapcguy le
Pour ceux qui votent contre parce que vous pensez que eval()c'est si dangereux, vous devez regarder le code dans le contexte utilisé par l'OP. Ce n'est pas, dans ce cas, parce qu'il utilise une entrée qui ne provient pas d'une zone de texte ou de toute autre forme d'entrée utilisateur où il pourrait y avoir n'importe quelle forme d'injection d'une valeur non numérique! J'aurais aimé pouvoir voter contre vos votes négatifs!
vapcguy le
Un autre downvoter. Vous voulez vous expliquer, au lieu d'être simplement un mouton? Il y a des moments où eval()tout va bien, et vous devez regarder le contexte dans lequel il est utilisé, au lieu de simplement croire aveuglément tout ce que vous lisez sans vraiment le comprendre!
vapcguy
1
@ChadLevy Ok, sur ce point, vous avez raison. Je n'ai pas regardé cette section - je me suis concentré sur ce qu'il a mis en haut de la page: le code var dots = 5 function increase(){ dots = dots+5; }n'utilise pas de champ de texte et attribue à l'aide de variables directes, pas à partir de l'entrée utilisateur. C'est donc ce dont je suis parti. Mais j'ai vu que vous avez raison qu'il attribue ce champ de texte txtà dots, et qu'il dotsest une variable globale, et qu'il est donc mis à jour par cette entrée. Vous avez raison. Merci.
vapcguy