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

mikadox

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

JavaScript
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
 
Dernière modification par un modérateur:
Solution
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...

Nicolas

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

JavaScript
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
JavaScript
var x = "4", y = "3";
total = parseFloat("4") + parseFloat("3");

alert(total); // résultat 7

 

Jack

Membre
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)
JavaScript
var x = "12";

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

A+
 

mikadox

Membre
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

Membre
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.
JavaScript
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à...
 

Jack

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

JavaScript
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);
 

L'occitan

Membre
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
JavaScript
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
HTML
<p id="resultat"></p>
la suite de chiffre de la variable loto s'affichera entre les balises <p>

(y)
 

Nicolas

Membre
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 ! :D
OK, mais pour mon info et compréhension.. En testant ton exemple, j'arrive à ceci 331445128544 :unsure: 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...
JavaScript
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(' ');
Code
3 3 1 4 4 5 1 2 8 5 4 4
 
Capture d’écran 2021-02-17 155801.png
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Hello, J'ai créé un formulaire avec Bootstrap mais j'ai un problème de mise en forme. Les <input> prennent chacun leur propre ligne alors que j'aimerais que certains soit côte à côte. Je ne parviens pas du tout à faire ce que je veux et je ne trouve rien dans la documentation...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut