11521 sujets

JavaScript, DOM et API Web HTML5

Pages :
Modérateur
(reprise du message précédent)

Greg_Lumiere a écrit :
J'adore ton analogie Smiley clapclap


Smiley winner Vive la boustifaille ! Smiley winner
_laurent a écrit :
var endurance1 = document.getElementById("Endurance1");
endurance1 = "0.5";

hummmmm il n'y a rien qui te choque dans la réflexion ? Smiley langue

Imaginons que tu as besoin de farine (ton élément du DOM) et de sucre (le nombre 0.5) pour faire ta recette (le calcul). Du coup il te faut des récipients (les variables) pour ranger ces éléments avant de faire la recette.
Ici tu sors un nouveau saladier (var endurance1) et tu met la farine dedans (var endurance1 = document.getElementById("Endurance1");).
Est-ce que tu vois ce que tu fais en faisant : endurance1 = "0.5"; juste apres ? Tu dis j'ai mis ma farine dans le saladier 1 et juste apres tu dis je vais plutot mettre le sucre dans le saladier 1, du coup tu balance ta farine par terre et tu met le sucre. Smiley biggol

Il te faut un autre saladier !!!!! Smiley lol


Smiley biggrin la cuisine tout de suite ça m'attire beaucoup plus. Je comprend maintenant que je dois avoir un autre nom de variable pour chacune de mes variables, j'ai donc suivi les conseils et aussi si j'ai bien compris je devais changé le nom des variables au niveau des formules ? c'est bien ça ? mais je rencontre le même problème pour endurance1.

merci d'ailleurs pour le site suivant qui m'aide à avancer

https://jsfiddle.net/f3xchurs/6/
Modérateur
dafid5 a écrit :
Je comprend maintenant que je dois avoir un autre nom de variable pour chacune de mes variables, j'ai donc suivi les conseils

Yes c'est bien ce que tu as fait. Attention tout de même tu as déclaré ta variable comme ça :
var endurance1 = document.getElementById("Endurance1");

Mais tu l'utilise avec une majuscule :
Endurance1.innerHTML =  ..........

Il faut tout en minuscule du coup Smiley smile (bon après je sais plus si c'est case sensitive ou pas, ça à l'air de bien marcher mais bon histoire d'être cohérent c'est une bonne pratique !)


dafid5 a écrit :
si j'ai bien compris je devais changé le nom des variables au niveau des formules ? c'est bien ça ? mais je rencontre le même problème pour endurance1.

Mmmmmh là j'ai pas compris ce que tu voulais dire.... mais ton code a l'air de bien marcher non ? Smiley smile
_laurent a écrit :

Mmmmmh là j'ai pas compris ce que tu voulais dire.... mais ton code a l'air de bien marcher non ? Smiley smile


Quasi Smiley cligne y'a juste cette incohérence de résultat avec endurance 1, c'est pas censé avoir un résultat plus de deux chiffres. il doit y avoir encore un dernier problème, mais subtile Smiley smile


---> réponse qui conviendra : la valeur 0.5 bug, mais en mettant 0.500000001 ça fonctionne. J'ai juste des résultats avec pleins de décimales ... mais l'utilisation du XXXXX.toFixed(0) est pas si évident.

Merci encore Laurent pour ton aide. Le fait que tu m'ai orienté au fur et à mesure m'a déjà permis de comprendre ce que j'écrivais Smiley cligne

Je cloture le post, mais si tu as encore qq conseils pour limiter les décimales je suis preneur en MP
Modifié par dafid5 (17 Nov 2016 - 01:52)
Modérateur
Quand tu avais fait :
function getEndurance1(age, sexe, fcrepos, endurance1) {
    var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
    var total = result.toFixed(2);
    return total;
}

C'était correct, mais je ne le vois plus du tout dans ton code.
pour gagner une ligne tu peux juste faire :
function getEndurance1(age, sexe, fcrepos, endurance1) {
    var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
    return result.toFixed(2);
}
_laurent a écrit :
Quand tu avais fait :
function getEndurance1(age, sexe, fcrepos, endurance1) {
    var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
    var total = result.toFixed(2);
    return total;
}

C'était correct, mais je ne le vois plus du tout dans ton code.
pour gagner une ligne tu peux juste faire :
function getEndurance1(age, sexe, fcrepos, endurance1) {
    var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
    return result.toFixed(2);
}


Je ne l'ai pas mis, car ça ne fonctionne pas sur mon site.... Smiley decu


Uncaught TypeError: result.toFixed is not a function
    at getEndurance2 (http://www.dieteticien-nutritionniste-sante.com/js/kar-fc.js:54:19)
    at HTMLButtonElement.<anonymous> (http://www.dieteticien-nutritionniste-sante.com/js/kar-fc.js:26:29)
Modérateur
Ha j'ai mis un peu de temsp é décoller mon cerveau ce soir.... Alors quand tu as cette erruer "is not a function" il y a deux choix :
- soit tu t'es planté dans le nom de la fonction. Exemple : tofixed()
- soit tu n'applique pas la fonction sur le bon objet.

toFixed() s'applique sur un number. Or ici tu déclare les nombres comme des string :
var a = 0.85;
-> a est un "number"
var b = "0.85";
-> b est un "string"


il faut donc que résult soit un number et pour ça il faut que toutes les variables de l'équation le soient.

Donc premièrement il vaut mieux déclarer tes variables (pourcent) sans guillemets, ils seront des number par défaut.

Ensuite viens le problème des
var endurance1 = document.getElementById("Endurance1");

et je te le donne en mille : endurance1.value est un .... string.

On pourrait s'en foutre mais il y a des comportements "étrange" (mais certainement explicable) :

Alors qu'on a :
1 * 2 = 2
1 * "2" = 2
"1" * "2" = 2

Et :
1 / 2 = 0.5
1 / "2" = 0.5
"1" / "2" = 0.5


Le + agit comme un "concaténateur" et non plus comme une addition dès qu'il est en présence d'un string :
1 + 2 = 3
1 + "2" = "12"
"1" + "2" = "12"


Tout ca pour en revenir à tes calculs :

var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
return result.toFixed(2);

fcrepos est un string et comme il viens en dernier lieu accompagné d'un "+" BOUM ca transforme tout le résultat en string et ca attache fcrepos à la fin. Donc result est ici un string et toFixed ne peut s'appliquer à un string CQputaindeFD ! Smiley biggol

Bon du coup il faut juste aussi convertir tes .value en number avec une des fonctions comme Number() ou parseFloat()

Et pour faire un peu plus propre encore, au lieu de faire :
var age = document.getElementById("age");

Puis ensuite de passer age.value à la fonction on va directmeent mettre :

var age = Number(document.getElementById("age").value);

Comme ca la variable age contient la valeur en type number et c'est plié.

Donc attention à après ça ne passer que age et non plus age.value.
Il faut fait ca pour tout les autres champs (mais que pour les valeurs que tu récupères hein, pas pour les élément dont tu as besoin pour insérer la réponse.




Bon bah ca fait un sacré pavé, j'espere que j'avais encore les idées claires.... je relirai demain matin au cas ou.... Smiley sweatdrop
_laurent a écrit :
Ha j'ai mis un peu de temsp é décoller mon cerveau ce soir.... Alors quand tu as cette erruer "is not a function" il y a deux choix :
- soit tu t'es planté dans le nom de la fonction. Exemple : tofixed()
- soit tu n'applique pas la fonction sur le bon objet.

toFixed() s'applique sur un number. Or ici tu déclare les nombres comme des string :
var a = 0.85;
-&gt; a est un "number"
var b = "0.85";
-&gt; b est un "string"


il faut donc que résult soit un number et pour ça il faut que toutes les variables de l'équation le soient.

Donc premièrement il vaut mieux déclarer tes variables (pourcent) sans guillemets, ils seront des number par défaut.

Ensuite viens le problème des
var endurance1 = document.getElementById("Endurance1");

et je te le donne en mille : endurance1.value est un .... string.

On pourrait s'en foutre mais il y a des comportements "étrange" (mais certainement explicable) :

Alors qu'on a :
1 * 2 = 2
1 * "2" = 2
"1" * "2" = 2

Et :
1 / 2 = 0.5
1 / "2" = 0.5
"1" / "2" = 0.5


Le + agit comme un "concaténateur" et non plus comme une addition dès qu'il est en présence d'un string :
1 + 2 = 3
1 + "2" = "12"
"1" + "2" = "12"


Tout ca pour en revenir à tes calculs :

var result = (((sexe - age) - fcrepos) * endurance1) + fcrepos;
return result.toFixed(2);

fcrepos est un string et comme il viens en dernier lieu accompagné d'un "+" BOUM ca transforme tout le résultat en string et ca attache fcrepos à la fin. Donc result est ici un string et toFixed ne peut s'appliquer à un string CQputaindeFD ! Smiley biggol

Bon du coup il faut juste aussi convertir tes .value en number avec une des fonctions comme Number() ou parseFloat()

Et pour faire un peu plus propre encore, au lieu de faire :
var age = document.getElementById("age");

Puis ensuite de passer age.value à la fonction on va directmeent mettre :

var age = Number(document.getElementById("age").value);

Comme ca la variable age contient la valeur en type number et c'est plié.

Donc attention à après ça ne passer que age et non plus age.value.
Il faut fait ca pour tout les autres champs (mais que pour les valeurs que tu récupères hein, pas pour les élément dont tu as besoin pour insérer la réponse.




Bon bah ca fait un sacré pavé, j'espere que j'avais encore les idées claires.... je relirai demain matin au cas ou.... Smiley sweatdrop


Salut Laurent,
merci de ton aide encore une fois.

Je crois avoir tout suivi à la lettre comme tu l'as expliqué précédemment.
est-ce que tu considères mes variables 0,5, 07,.. comme des variables que l'on récupère ou pas ? dans mon exemple, j'ai considéré que c’était une variable qui était déjà insérée ... au final, mon script ne marche pas ? (j'ai testé aussi comme si c'était une variable inséré pour le test, mais pareil

var age = Number(document.getElementById("age").value);
var sexe = Number(document.getElementById("sexe").value);
var fcrepos = Number(document.getElementById("fcrepos").value);
var fcmax = document.getElementById("fcmax");
var fcres = document.getElementById("fcres");
var endurance1 = document.getElementById("Endurance1");
var pourcent1 = 0.5;
var endurance2 = document.getElementById("Endurance2");
var pourcent2 = 0.7;
var resdouce = (document.getElementById("Resdouce");
var pourcent3 = 0.85;
var resdure = document.getElementById("Resdure");
var pourcent4 = 0.95;

document.getElementById("calculer").addEventListener("click", function(event) {
		event.preventDefault();
    if(age && sexe && fcrepos) {
    	console.log("Calculating...");
    	fcmax.innerHTML = getFcmax(age, sexe);
    	fcres.innerHTML = getFcres(age, sexe, fcrepos);
    	Endurance1.innerHTML = getEndurance1(age, sexe, fcrepos, pourcent1);
    	Endurance2.innerHTML = getEndurance2(age, sexe, fcrepos, pourcent2);
    	Resdouce.innerHTML = getResdouce(age, sexe, fcrepos, pourcent3);
    	Resdure.innerHTML = getResdure(age, sexe, fcrepos, pourcent4);
    } else {
    	console.log("There is empty fields");
    }
});


function getFcmax(age, sexe) {
    var result = (sexe - age);
    return result;
}

function getFcres(age, sexe, fcrepos) {
    var result = (sexe - age) - fcrepos;
    return result;
}

function getEndurance1(age, sexe, fcrepos, pourcent1) {
    var result = (((sexe - age) - fcrepos) * pourcent1) + fcrepos;
    return result.toFixed();
}

function getEndurance2(age, sexe, fcrepos, pourcent2) {
    var result = (((sexe - age) - fcrepos) * pourcent2) + fcrepos;
    return result.toFixed();
}

function getResdouce(age, sexe, fcrepos, pourcent3) {
    var result = (((sexe - age) - fcrepos) * pourcent3) + fcrepos;
    return result.toFixed();
}

function getResdure(age, sexe, fcrepos, pourcent4) {
    var result = (((sexe - age) - fcrepos) * pourcent4) + fcrepos;
    return result.toFixed();
}


Smiley biggol
Modérateur
Coucou !

T'as tout bien fait.

Sauf à la ligne 10
var resdouce = (document.getElementById("Resdouce");

La première parenthèse est de trop.

Attention aussi tu as laissé des Endurance1.innerHTML avec une majuscule, tes variables s'écrivent en minuscule.

Ensuite il y a peut etre un problème avec l'endroit ou récupérer les variables. Là c'est ma faut j'ai loupé une étape.

Il vaudrait mieux mettre toutes les variables que tu veux récupérer (donc pas tes valeurs fixes) à l'intérieur de la fonction. Avant ca marchait car on récupérait seulement l'élément et une fois clické on demandait la valeur. Là comme je t'ai dis de tout mettre à l'extérieur il ne prend qu'une fois la valeur du champs (au moment du chargement) et il n'en change pas.... bref, désolé pour ça...

Ca devrait ressembler à ca du coup :

/* Pourcentages fixes */
var pourcent1 = 0.5;
var pourcent2 = 0.7;
var pourcent3 = 0.85;
var pourcent4 = 0.95;

/* Eléments du DOM pour récupérer les valeurs */
var ageInput = document.getElementById("age");
var sexeInput = document.getElementById("sexe");
var fcreposInput = document.getElementById("fcrepos");

/* Eléments du DOM pour afficher les réponses */
var fcmax = document.getElementById("fcmax");
var fcres = document.getElementById("fcres");
var endurance1 = document.getElementById("Endurance1");
var endurance2 = document.getElementById("Endurance2");
var resdouce = document.getElementById("Resdouce");
var resdure = document.getElementById("Resdure");

document.getElementById("calculer").addEventListener("click", function(event) {
		event.preventDefault();
    
    /* Récupération des valeurs des inputs au click et transformation en number */
    var age = Number(ageInput.value);
    var sexe = Number(sexeInput.value);
    var fcrepos = Number(fcreposInput.value);

    if(age && sexe && fcrepos) {
    	console.log("Calculating...");
    	fcmax.innerHTML = getFcmax(age, sexe);
    	fcres.innerHTML = getFcres(age, sexe, fcrepos);
    	endurance1.innerHTML = getEndurance1(age, sexe, fcrepos, pourcent1);
    	endurance2.innerHTML = getEndurance2(age, sexe, fcrepos, pourcent2);
    	resdouce.innerHTML = getResdouce(age, sexe, fcrepos, pourcent3);
    	resdure.innerHTML = getResdure(age, sexe, fcrepos, pourcent4);
    } else {
    	console.log("There is empty fields");
      /* Ici mettre du code pour afficher les erreur par exemple */
    }
});

/* Et après toutes tes fonctions de calculs comme avant */
Pages :