javascript Addition de deux valeurs, colle les valeurs à la place.

[mikadox]

Bonjour,

J'ai vu le forum sur google
Je lance une bouteille à la mer, je voudrais résoudre un exercice de Javascript que l'on me demande mais j'y arrive pas.
Quand je veux additionner deux valeurs au lieu de s'additionner les valeurs se collent entre elles pour le résultat.

var x = "33";
var y = "14";

var total = x + y;

//le résultat donne 3314 au lieu de 47 !

voilà merci si vous avez la réponse

 

[Ziggy]

Je crois pas que + c'est PLUS en JS non ?

 

[Nicolas]

Concaténation !

Le terme concaténation, du latin cum et catena, désigne l'action de mettre bout à bout au moins deux chaînes de caractères

Tu as raison Ziggy, + en JavaScript ordonne la concaténation de deux chaînes de caractères, dans ce cas "34" et "13" donc 3413.
Si les valeurs sont des chaînes de caractères Bon et jour le résultat sera Bonjour !

+ peut additionner en JS à condition que les valeurs ajoutées ne soient pas des chaînes de caractères, caractérisées par leur mise sous guillemets. Dans ton exercice 34 et 13 ne sont pas considérés comme des valeurs numériques mais des chaînes de caractères puisqu'ils sont définis comme ceci "33" et "14".

var x = "4", y = "3";
total = x + y;

alert(total); // résultat 43

var x = 4, y = 3;
total = x + y;

alert(total); // résultat 7

Mais si dans le cadre de ton exercice tu ne peux pas changer le type de variable, ce qui est fort probable et que tu veux tout de même les additionner mathématiquement alors tu peux utiliser parseFloat

var x = "4", y = "3";
total = parseFloat("4") + parseFloat("3");

alert(total); // résultat 7

parseFloat() - JavaScript | MDN

La fonction parseFloat() permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (parsing).

developer.mozilla.org

 

[Jack]

Joli !

On peut "transformer" une variable numérique définie comme chaîne de caractères (string) avec 3 méthodes supplémentaires:

• en ajoutant le signe + juste devant la variable (string)
• en multipliant la variable (string) par 1
• an ajoutant Number juste devant la variable (string)

var x = "12";

var nb1 = +"12";
var nb2 = "12" * 1;
var nb3 = Number("12");

A+

 

[mikadox]

Merci pour les réponses, ok donc il faut transformer la chaine de caractère en valeur numérique avant l'opération.
Du coup dans quel cas il est utile d'écrire un chiffre comme chaine de caractère si on doit le transformer avant toutes opérations mathématiques ?

 

[Anthony]

Du coup dans quel cas il est utile d'écrire un chiffre comme chaine de caractère si on doit le transformer avant toutes opérations mathématiques ?

Probablement lorsque tu veux écrire une suite de chiffres sans les additionner.

var a = document.getElementById("33").value;
var b = document.getElementById("14").value;
var c = document.getElementById("45").value;
var c = document.getElementById("1").value;
var e = document.getElementById("28").value;
var f = document.getElementById("5").value;
var g = document.getElementById("44").value;
 
var loto = a + b + c + d + e + f + g;

Les résultats du LOTO dans ce cas là...

 

[Hamza]

Les résultats du LOTO dans ce cas là...

Pour quel tirage ?? Je suis un peu à sec ces temps-ci, une petite cagnotte ferait du bien

 

[yule]

Bon ben quand on a envie d'apprendre, ça devient trop dangereux ici !!!
Il me faudrait une clé usb "oculaire" .. Pôv cerveau...

 

[Jack]

var a = document.getElementById("33").value;
var b = document.getElementById("14").value;
var c = document.getElementById("45").value;
var c = document.getElementById("1").value;
var e = document.getElementById("28").value;
var f = document.getElementById("5").value;
var g = document.getElementById("44").value;

var loto = a + b + c + d + e + f + g;

Je doute fort du résultat dans ce cas...
Déjà parce que tu déclares deux fois la valeur c (erreur de frappe) et surtout parce que tu utilise document.getElementById() pour déclarer des valeurs sans coder de fonction. As-tu essayé ce code ? Probablement pas parce qu'il ne fonctionne pas.

var a="33", b="14", c="45", d="1", e="28", f="5", g="44";

var loto = a + b + c + d + e + f + g;
document.write(loto);

 

[Nicolas]

Ben on est pas bon les gars !

 

[yule]

Ben on est pas bon les gars !

Hahaha, disons que le JS et moi c'est chou blanc, Merci à @Jack , C'est pas de moi que serait venu la correction !

 

[L'occitan]

Bon, on va mettre tout ça à plat.

document.getElementById ne sert pas à déclarer des valeurs mais à les obtenir pour les afficher ailleurs, dans du HTML pour ne pas le citer. Pour reprendre l'exemple du loto on pourrait l'utiliser de cette façon

var a="33", b="14", c="45", d="1", e="28", f="5", g="44";

var loto = a + b + c + d + e + f + g;
document.getElementById("resultat").innerHTML = loto;

Et on récupère la valeur dans le fichier HTML

<p id="resultat"></p>

la suite de chiffre de la variable loto s'affichera entre les balises <p>

 

[yule]

Bon, on va mettre tout ça à plat.

OK, mais pour mon info et compréhension.. En testant ton exemple, j'arrive à ceci 331445128544 idem pour l'exemple de @Jack
Je dois mal utiliser codepen....

Toujours pour ma curiosité, c'est ma bête noire le JS, avez une exemple codepen ? Merci.

 

[Nicolas]

document.getElementById ne sert pas à déclarer des valeurs mais à les obtenir pour les afficher ailleurs, dans du HTML pour ne pas le citer. Pour reprendre l'exemple du loto on pourrait l'utiliser de cette façon

J'ai posé la question sur un forum et on m'a répondu la même chose. Je devrais faire plus confiance aux membres !

OK, mais pour mon info et compréhension.. En testant ton exemple, j'arrive à ceci 331445128544 idem pour l'exemple de @Jack

Oui pareil pour moi, il manque la mise en forme du résultat.
J'ai essayé ceci mais ça sépare tous les caractères...

var a="33", b="14", c="45", d="1", e="28", f="5", g="44";

var loto = a + b + c + d + e + f + g;
document.getElementById("resultat").innerHTML = loto.split('').join(' ');

3 3 1 4 4 5 1 2 8 5 4 4

 

[L'occitan]

 

[Eleven Up]

Vous vous êtes bien pris la tête, êtes partis dans tous les sens mais finalement le résultat est là.
C'est @mikadox qui va être content...

 

[mikadox]

Je suis comblé !

 

[c-cadeau]

Hello, et dans ce cas là ?

var x = 4, y = "3";
total = x + y;

 

[Victorinox]

 

[mikadox]

Hello, et dans ce cas là ?

Dans le cas d'une somme entre string et number c'est toujours le number qui est converti en string (rien de sexy ici !)