Page 1 sur 1

comment appliquer le meme code javaScript a plusieurs bulletins sur une meme page web

Posté : 22 févr. 2024, 03:53
par PastoFerrari
salut à tous moi c'est PastoFerrari j'ai un souci avec mon code javaScript Svp en fait je travaille sur les bulletins de classe et pour chaque classe jai pas envi d'ecrire le meme code javaSript plusieurs fois donc je voudrais que mon code javaScript s'applique a tous le bulletins pour ça j'ai creer une fonction qui ajouter un nouveau bulletin lorsqu'on clique sur un boutton. le souci et d'appliquer le JavaScript ci-desous au nouveau bulletin. j'ai éssayer mais le debogueur dit que 'idLigne' n'est pas defini svp comment faire ?

code JavaScript :

function cal(idLigne){

let Eval1 = parseFloat(document.getElementById(idLigne).querySelector(".Eval1").value);
let Eval2 = parseFloat(document.getElementById(idLigne).querySelector(".Eval2").value);
let Moy = document.getElementById(idLigne).querySelector(".Moyenne").value = (Eval1+Eval2)/2;
let Coef = parseFloat(document.getElementById(idLigne).querySelector(".Coef").value);
let Total = document.getElementById(idLigne).querySelector(".Total").value = (Moy*Coef);
let Appr = document.getElementById(idLigne).querySelector(".Appreciation").value;

let Eval1L1B1 = parseFloat(document.getElementById("Ligne1B1").querySelector(".Eval1").value);
let Eval1L2B1 = parseFloat(document.getElementById("Ligne2B1").querySelector(".Eval1").value);
let Eval1L3B1 = parseFloat(document.getElementById("Ligne3B1").querySelector(".Eval1").value);
let Eval1L4B1 = parseFloat(document.getElementById("Ligne4B1").querySelector(".Eval1").value);
let Eval1L5B1 = parseFloat(document.getElementById("Ligne5B1").querySelector(".Eval1").value);
let Eval1L6B1 = parseFloat(document.getElementById("Ligne6B1").querySelector(".Eval1").value);
let Eval1L7B1 = parseFloat(document.getElementById("Ligne7B1").querySelector(".Eval1").value);
let Eval1L8B1 = parseFloat(document.getElementById("Ligne8B1").querySelector(".Eval1").value);
let Eval1L9B1 = parseFloat(document.getElementById("Ligne9B1").querySelector(".Eval1").value);
let Eval1L10B1 = parseFloat(document.getElementById("Ligne10B1").querySelector(".Eval1").value);
let Eval1L11B1 = parseFloat(document.getElementById("Ligne11B1").querySelector(".Eval1").value);
let Eval1L12B1 = parseFloat(document.getElementById("Ligne12B1").querySelector(".Eval1").value);
let Eval1L13B1 = parseFloat(document.getElementById("Ligne13B1").querySelector(".Eval1").value);
let TotalEval1 = document.getElementById("Ligne14B1").querySelector(".TotalEval1").value = (Eval1L1B1+Eval1L2B1+Eval1L3B1+Eval1L4B1+Eval1L5B1+Eval1L6B1+Eval1L7B1+Eval1L8B1+Eval1L9B1+Eval1L10B1+Eval1L11B1+Eval1L12B1+Eval1L13B1);

let Eval2L1B1 = parseFloat(document.getElementById("Ligne1B1").querySelector(".Eval2").value);
let Eval2L2B1 = parseFloat(document.getElementById("Ligne2B1").querySelector(".Eval2").value);
let Eval2L3B1 = parseFloat(document.getElementById("Ligne3B1").querySelector(".Eval2").value);
let Eval2L4B1 = parseFloat(document.getElementById("Ligne4B1").querySelector(".Eval2").value);
let Eval2L5B1 = parseFloat(document.getElementById("Ligne5B1").querySelector(".Eval2").value);
let Eval2L6B1 = parseFloat(document.getElementById("Ligne6B1").querySelector(".Eval2").value);
let Eval2L7B1 = parseFloat(document.getElementById("Ligne7B1").querySelector(".Eval2").value);
let Eval2L8B1 = parseFloat(document.getElementById("Ligne8B1").querySelector(".Eval2").value);
let Eval2L9B1 = parseFloat(document.getElementById("Ligne9B1").querySelector(".Eval2").value);
let Eval2L10B1 = parseFloat(document.getElementById("Ligne10B1").querySelector(".Eval2").value);
let Eval2L11B1 = parseFloat(document.getElementById("Ligne11B1").querySelector(".Eval2").value);
let Eval2L12B1 = parseFloat(document.getElementById("Ligne12B1").querySelector(".Eval2").value);
let Eval2L13B1 = parseFloat(document.getElementById("Ligne13B1").querySelector(".Eval2").value);
let TotalEval2 = document.getElementById("Ligne14B1").querySelector(".TotalEval2").value = (Eval2L1B1+Eval2L2B1+Eval2L3B1+Eval2L4B1+Eval2L5B1+Eval2L6B1+Eval2L7B1+Eval2L8B1+Eval2L9B1+Eval2L10B1+Eval2L11B1+Eval2L12B1+Eval2L13B1);

let MoyL1B1 = parseFloat(document.getElementById("Ligne1B1").querySelector(".Moyenne").value);
let MoyL2B1 = parseFloat(document.getElementById("Ligne2B1").querySelector(".Moyenne").value);
let MoyL3B1 = parseFloat(document.getElementById("Ligne3B1").querySelector(".Moyenne").value);
let MoyL4B1 = parseFloat(document.getElementById("Ligne4B1").querySelector(".Moyenne").value);
let MoyL5B1 = parseFloat(document.getElementById("Ligne5B1").querySelector(".Moyenne").value);
let MoyL6B1 = parseFloat(document.getElementById("Ligne6B1").querySelector(".Moyenne").value);
let MoyL7B1 = parseFloat(document.getElementById("Ligne7B1").querySelector(".Moyenne").value);
let MoyL8B1 = parseFloat(document.getElementById("Ligne8B1").querySelector(".Moyenne").value);
let MoyL9B1 = parseFloat(document.getElementById("Ligne9B1").querySelector(".Moyenne").value);
let MoyL10B1 = parseFloat(document.getElementById("Ligne10B1").querySelector(".Moyenne").value);
let MoyL11B1 = parseFloat(document.getElementById("Ligne11B1").querySelector(".Moyenne").value);
let MoyL12B1 = parseFloat(document.getElementById("Ligne12B1").querySelector(".Moyenne").value);
let MoyL13B1 = parseFloat(document.getElementById("Ligne13B1").querySelector(".Moyenne").value);
let TotalMoy = document.getElementById("Ligne14B1").querySelector(".TotalMoyenne").value = (MoyL1B1+MoyL2B1+MoyL3B1+MoyL4B1+MoyL5B1+MoyL6B1+MoyL7B1+MoyL8B1+MoyL9B1+MoyL10B1+MoyL11B1+MoyL12B1+MoyL13B1);

let CoefL1B1 = parseFloat(document.getElementById("Ligne1B1").querySelector(".Coef").value);
let CoefL2B1 = parseFloat(document.getElementById("Ligne2B1").querySelector(".Coef").value);
let CoefL3B1 = parseFloat(document.getElementById("Ligne3B1").querySelector(".Coef").value);
let CoefL4B1 = parseFloat(document.getElementById("Ligne4B1").querySelector(".Coef").value);
let CoefL5B1 = parseFloat(document.getElementById("Ligne5B1").querySelector(".Coef").value);
let CoefL6B1 = parseFloat(document.getElementById("Ligne6B1").querySelector(".Coef").value);
let CoefL7B1 = parseFloat(document.getElementById("Ligne7B1").querySelector(".Coef").value);
let CoefL8B1 = parseFloat(document.getElementById("Ligne8B1").querySelector(".Coef").value);
let CoefL9B1 = parseFloat(document.getElementById("Ligne9B1").querySelector(".Coef").value);
let CoefL10B1 = parseFloat(document.getElementById("Ligne10B1").querySelector(".Coef").value);
let CoefL11B1 = parseFloat(document.getElementById("Ligne11B1").querySelector(".Coef").value);
let CoefL12B1 = parseFloat(document.getElementById("Ligne12B1").querySelector(".Coef").value);
let CoefL13B1 = parseFloat(document.getElementById("Ligne13B1").querySelector(".Coef").value);
let TotalCoef = document.getElementById("Ligne14B1").querySelector(".TotalCoef").value = (CoefL1B1+CoefL2B1+CoefL3B1+CoefL4B1+CoefL5B1+CoefL6B1+CoefL7B1+CoefL8B1+CoefL9B1+CoefL10B1+CoefL11B1+CoefL12B1+CoefL13B1);

let TotalL1B1 = parseFloat(document.getElementById("Ligne1B1").querySelector(".Total").value);
let TotalL2B1 = parseFloat(document.getElementById("Ligne2B1").querySelector(".Total").value);
let TotalL3B1 = parseFloat(document.getElementById("Ligne3B1").querySelector(".Total").value);
let TotalL4B1 = parseFloat(document.getElementById("Ligne4B1").querySelector(".Total").value);
let TotalL5B1 = parseFloat(document.getElementById("Ligne5B1").querySelector(".Total").value);
let TotalL6B1 = parseFloat(document.getElementById("Ligne6B1").querySelector(".Total").value);
let TotalL7B1 = parseFloat(document.getElementById("Ligne7B1").querySelector(".Total").value);
let TotalL8B1 = parseFloat(document.getElementById("Ligne8B1").querySelector(".Total").value);
let TotalL9B1 = parseFloat(document.getElementById("Ligne9B1").querySelector(".Total").value);
let TotalL10B1 = parseFloat(document.getElementById("Ligne10B1").querySelector(".Total").value);
let TotalL11B1 = parseFloat(document.getElementById("Ligne11B1").querySelector(".Total").value);
let TotalL12B1 = parseFloat(document.getElementById("Ligne12B1").querySelector(".Total").value);
let TotalL13B1 = parseFloat(document.getElementById("Ligne13B1").querySelector(".Total").value);
let TotalTotal = document.getElementById("Ligne14B1").querySelector(".TotalTotal").value = (TotalL1B1+TotalL2B1+TotalL3B1+TotalL4B1+TotalL5B1+TotalL6B1+TotalL7B1+TotalL8B1+TotalL9B1+TotalL10B1+TotalL11B1+TotalL12B1+TotalL13B1);

let CoefTotal = document.getElementById("Ligne19B1").querySelector(".CoefB1").value = (TotalCoef);
let PointsTotal= document.getElementById("Ligne18B1").querySelector(".PointsB1").value = (TotalTotal);
let Moyenne = document.getElementById("Ligne19B1").querySelector(".MoyenneB1").value = (TotalTotal/TotalCoef);

// Couleur en fonction de la note
if(Eval1 < 10){
document.getElementById(idLigne).querySelector(".Eval1").style.backgroundColor = "gray";
}else{
document.getElementById(idLigne).querySelector(".Eval1").style.backgroundColor = "white";
}

if(Eval2 < 10){
document.getElementById(idLigne).querySelector(".Eval2").style.backgroundColor = "gray";
}else{
document.getElementById(idLigne).querySelector(".Eval2").style.backgroundColor = "white";
}

if(Moy < 10){
document.getElementById(idLigne).querySelector(".Moyenne").style.backgroundColor = "gray";
}else{
document.getElementById(idLigne).querySelector(".Moyenne").style.backgroundColor = "white";
}

// appreciation

if(Moy < 10 ){
document.getElementById(idLigne).querySelector(".Appreciation").value ="Non Acquis"
}else{
document.getElementById(idLigne).querySelector(".Appreciation").value ="Acquis"
}
return(Moy, Total, TotalEval1, TotalEval2, TotalMoy, TotalCoef, TotalTotal, CoefTotal, PointsTotal);

}

Re: comment appliquer le meme code javaScript a plusieurs bulletins sur une meme page web

Posté : 22 févr. 2024, 08:43
par webmaster
Bonjour

C'est le cas typique ou il faut utiliser des tableaux (Array) pour stocker des données
Voici un tuto
https://www.toutjavascript.com/savoir/savoir09.php3

Re: comment appliquer le meme code javaScript a plusieurs bulletins sur une meme page web

Posté : 22 févr. 2024, 11:58
par PastoFerrari
Merci beaucoup je vais tester ça

Re: comment appliquer le meme code javaScript a plusieurs bulletins sur une meme page web

Posté : 09 avr. 2024, 04:52
par EssaMattou
C'est assez compliqué. Mais je vais aussi essayer.
Head Soccer

Re: comment appliquer le meme code javaScript a plusieurs bulletins sur une meme page web

Posté : 09 avr. 2024, 06:14
par Nordine
Bonjour,

C'est en effet une compétence fondamentale pour tout développeur web, surtout pour ceux qui se lancent en tant qu'entrepreneurs et doivent jongler avec différentes tâches de développement. Avoir une solide maîtrise des tableaux peut certainement faciliter la gestion des données et améliorer l'efficacité de nos projets. D'ailleurs, pour les apprentis entrepreneurs, le site Passion-Entrepreneur vous sera d'une grande aide. En tout cas, ça m'a bien aidé dans mes démarches et processus de développement.