Récupérer variable entre fonction javascript / Jquery

Bonjour,
J'ai besoin de vos lumières sur ce code ;

$('#tableAmount').on('input', "input[id^='qteLigne']", function(){
				nbrOriginaux = 0;
					$("input[id^='qteLigne']").each(function() {
					nbrOriginaux += Number($(this).val());
					return nbrOriginaux;
				});
				$("#nbOriginals").val(nbrOriginaux);
				console.log(nbrOriginaux); // affiche bien le nbre d 'originaux
			});
				console.log(nbrOriginaux); // is not defined

1 - Mon problème principal c'est que j'aurai besoin de me servir de la variable 'nbrOriginaux' dans une nouvelle fonction.
Si j'ai bien compris cela est compromis par rapport à la portée des variables (globales / locales)
Quelle solution j'ai pour cela ?

2 - Aussi, je ne comprend pas pourquoi la variable est prise en compte dans la 1ère console.log et pas la seconde ?

Merci de vos avis

salut,
en fait dans ton exemple, la variable est bien dans un contexte global. Quand on ne la déclare pas un var, celle-ci appartient à l'objet window (ce qui est par contre une mauvaise pratique).

Ton deuxième log est effectué immédiatement lors de l'exécution du code tandis que ton premier est effectué après l'évènement input.
Comme tu assignes une valeur à ta variable uniquement dans la fonction, celle-ci est donc undefined au début de l'exécution et au moment de ton log.

$('#tableAmount').on('input', "input[id^='qteLigne']", function(){
				var nbrOriginaux = 0; // je déclare avec var
					$("input[id^='qteLigne']").each(function() {
					nbrOriginaux += Number($(this).val());
					return nbrOriginaux;
				});
				$("#nbOriginals").val(nbrOriginaux);
				console.log(nbrOriginaux); // affiche bien le nbre d 'originaux
			});

Merci pour ton retour, cela est plus clair... effectivement hors événement, la variable n'existe pas (une erreur basique j'imagine)
Mais du coup si je veux réutiliser cette variable dans une nouvelle fonction en dehors de cet événement input, il faut que je créai une fonction supplémentaire ? Autour de cette fonction ?
Parce que l’événement input ne m'est plus utile par la suite.
Merci

Il suffit simplement de déclarer ta variable dans un contexte supérieur commun aux deux fonctions dans lesquelles tu vas l'utiliser.
En l'occurrence, tu peux le faire simplement dans le contexte globale.

var nbrOriginaux; // Déclaration dans un contexte supérieur (ici global)
$('#tableAmount').on('input', "input[id^='qteLigne']", function(){
				nbrOriginaux = 0; // Simple attribution de valeur
					$("input[id^='qteLigne']").each(function() {
					nbrOriginaux += Number($(this).val());
					return nbrOriginaux;
				});
				$("#nbOriginals").val(nbrOriginaux);
				console.log(nbrOriginaux); // affiche bien le nbre d 'originaux
			});

EDIT / PS:
Tu peux utiliser les balises codes plus spécifiques
Modifié par Zelalsan (12 Sep 2017 - 22:59)

Je n ai pas essayé ce que tu me proposes. Mais il me semble que la valeur que prend la variable dans l événement input, ne pourra pas être utilisé dans une nouvelle fonction. Trop fatigué pour tester
Des la premiere heure demain je fais cela.
En fait tu me proposes de faire un var globale ?

Je ne crois pas qu'elle ne puisse pas être utilisée en dehors de la fonction. Je n'ai pas testé le code mais ça m'a l'air tellement évident.
Si la variable est déclarée dans un contexte global, le fait de la modifier dans une fonction implique sa modification à l'échelle globale également.
La seule chose qui pourrait ne pas la modifier serait de la redéclarer à l'intérieur de ta fonction (soit avec var, soit en tant qu'argument).
Tu peux voir les différences avec ces exemple : exemple 1, exemple 2, exemple 3.
Par contre, cela va de soi que pour utiliser la valeur attribuée dans ta fonction, l'appel à ta seconde fonction doit se faire après l'évènement input, si non, elle sera indéfinie.
Quant au contexte à choisir, à toi de voir. Le plus simple évidemment est d'utiliser directement un contexte global mais si tu dois protéger tes noms de variables ou je ne sais pour quelle autre raison tu veux utiliser une fonction englobante bin tu peux aussi

Ola et merci pour ta réponse tardive, ou hyper matinal
Du coup si je comprend bien, si je veux utiliser la valeur de nbrOriginaux, je suis obligé de la faire dans la function de l’événement input

var nbrOriginaux;
var dureeTotale;
$('#tableAmount').on('input', "input[id^='qteLigne']", function(){
    nbrOriginaux = 0;
    $("input[id^='qteLigne']").each(function() {
        nbrOriginaux += Number($(this).val());
        return nbrOriginaux;
    });
    $("#nbOriginals").val(nbrOriginaux);
    console.log(nbrOriginaux); // OK çà s'affiche
});
 console.log(nbrOriginaux); // Bouh çà ne s'affiche pas ! ('normal !!!) !

J'ai bien compris pourquoi çà ne s'affiche pas puisque l’événement input n'a pas eu lieu.
Cette fonction :

function test(){
    console.log(nbrOriginaux);
}
test()

Ne peut être utilisée que dans l’événement Input ?
Ou alors il faut créer une condition genre :
if(événement input joué){
utiliser nbrOriginaux
}
Une ptite question subsidiaire : il n'est pas possible d'utiliser les variable en tant qu'argument dans une fonction il m'a sembler lire ?

Merci en tous les cas

Ce n'est pas que tu es obligé de le faire dans ta fonction mais c'est cette fonction (liée à l'évènement input) qui définit ta variable. Avant cela, elle est simplement déclarée mais n'a aucune donnée (et est donc indéfinie).
Je ne sais pas ce que tu désires faire. Peut être en exposant la problématique en entier, d'autres solutions apparaîtront.

Je n'ai pas dit que "il n'est pas possible d'utiliser les variable en tant qu'argument dans une fonction" J'ai dit que si tu donnes le nom nbrOriginaux à un argument dans ta fonction, la variable initiale et globale nbrOriginaux sera redéclarée

var foo = 5;

function bar(foo) {
	console.log(foo); // Affiche "undefined"
}

bar();

En fait dans l'événement input je définis les variables nbrOriginaux et duree et j'ai besoin de réutiliser ces deux variables plus tard pour réaliser un calcul dans une fonction d'éléments du reste du formulaire.

J ai passé pas mal de temps aujourd hui creer des fonctions etc etc mais j ai fini par en revenir au même point

En fait cette fonction input permet de déterminer les variables nbrOriginaux et duree. Ces 2 variables sont globales car doivent être utiliser par la suite dans une fonction calcul.
En fait je réalise un grand formulaire d'estimation pour des cassettes audio.
Ce dernier est composé de la sorte :

radio1
radio2
radio3

radioA
radioB

input1
input2
input3
input4
...
function definir originaux{
me permet de définir les originaux et remplir les input 1,2,3,4 (avec AJAX)
}

function evenement input{
me permet de définir le nombre d originaux et la durée de l'ensemble des originaux
}

function prix classique ou haut de gamme{
me permet 'afficher le prix choissi par la radio
}

Radio 1,2,3 défini la valeur des inputs 1,2,3,4
Les input 1,2,3,4 me permettent de calculer la durée total et le nombre total d'originaux
Radio A, B permette d'afficher le prix classique ou le prix haut de gamme. Ces radios doivent être autonome par rapport à l'événement input.

En reprenant mon code ci-dessus comment je pourrais utiliser mes variables globales :

var nbrOriginaux;
var dureeTotale;
$('#tableAmount').on('input', "input[id^='qteLigne']", function(){ //total input1,2,3,4...
    nbrOriginaux = 0;
    $("input[id^='qteLigne']").each(function() {
        nbrOriginaux += Number($(this).val());
        return nbrOriginaux; //total input1,2,3,4...
    });
    $("#nbOriginals").val(nbrOriginaux);
    // ici je fais la même fonction qui me permet de définir la durée totale
});

//ma question simple est quel bout de code je rajoute ici pour pouvoir utiliser les variables dans la fonctions suivante :

function calcul_prix(){
    prixClassique = dureeTotal * 12 + nbrOriginaux  ;
   prixHgamme = dureeTotal * 16 + nbrOriginaux  ;
}

Je sais pas si c'est clair, je suis en train de me brouiller aussi
Modifié par urlien (13 Sep 2017 - 23:34)