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

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
PastoFerrari
Messages : 5
Enregistré le : 22 févr. 2024, 03:18

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

Message par PastoFerrari » 22 févr. 2024, 03:53

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

}

Avatar du membre
webmaster
Administrateur du site
Messages : 578
Enregistré le : 28 févr. 2017, 15:19

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

Message par webmaster » 22 févr. 2024, 08:43

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
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

PastoFerrari
Messages : 5
Enregistré le : 22 févr. 2024, 03:18

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

Message par PastoFerrari » 22 févr. 2024, 11:58

Merci beaucoup je vais tester ça

EssaMattou
Messages : 1
Enregistré le : 09 avr. 2024, 04:44

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

Message par EssaMattou » 09 avr. 2024, 04:52

C'est assez compliqué. Mais je vais aussi essayer.
Head Soccer

Nordine
Messages : 1
Enregistré le : 09 avr. 2024, 05:58

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

Message par Nordine » 09 avr. 2024, 06:14

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.

Répondre