appliquer le css par defaut si la condition js n'est pas valide + ajustement span en ce basant sur une unité

a marqué ce sujet comme résolu.

Bonjour tout le monde, j’essaye de créer une sorte de barre(span) qui change en se basant sur la note attribuée: mais j’ai vraiment beaucoup de difficilté: 1-je n’arrive pas à enlever le css appliquer si la condition ne s’applique pas. 2-j’arrive pas à changer le width en ce basant sur la note attribuée, sachant que je dois ajuster la largeur de cette barre en prenant un pas de 50px par unité. de l’aide svp!!

body                { font-family: Verdana, sans-serif; margin: 30px; }
        p                   { margin-bottom: 40px; }
        span                { display: inline-block; line-height: 25px; height: 25px; vertical-align: middle; }
        span:nth-of-type(1) { width: 200px; margin-right: 20px; text-align: right; }
        span:nth-of-type(2) { background-color: darkturquoise; width: 0; transition: 1s; }
        span:nth-of-type(3) { margin-left: 10px; }

window.addEventListener("load", function() {

            var notes = [
                { "matiere" : "Français", "note"  : 5.6 },
                { "matiere" : "Anglais" , "note"  : 7.2 },
                { "matiere" : "Maths"   , "note"  : 8.4 },
                { "matiere" : "Physique", "note"  : 3.2 },
                { "matiere" : "Chimie"  , "note"  : 6.1 },
                { "matiere" : "Biologie", "note"  : 9.4 }
            ];
            
            
            
            var element = document.getElementById("notes");
            
            for(var i =0;i<notes.length;i++){
                
                var para = document.createElement("p");
                var spanMatiere = document.createElement("span");
                var spanNotesNoValide = document.createElement("span");
                var spanNotes = document.createElement("span");
                
                
                spanMatiere.innerHTML = notes[i].matiere;
                
                
            if(notes[i].note<6){
                    
                   for(var j=0;j<notes[i].note;j++){
                            
                        spanNotesNoValide.style.width +="50px";
                        spanNotesNoValide.style.backgroundColor = "red";    
                    }
                
            }else if(notes[i].note.currentStyle){
            
                for(var j=0;j<6;j++){
                    
                                            spanNotesNoValide.style.removeProperty('width');         
                                            spanNotesNoValide.style.removeProperty('backgroundColor');
    
                    
                }
            }
                
                
                // afficher la note après la barre 
                spanNotes.innerHTML = notes[i].note;
                
                
                element.appendChild(para);
                para.appendChild(spanMatiere);
                para.appendChild(spanNotesNoValide);
                para.appendChild(spanNotes);
            }
            
        });

<body>
    <main>
        <section id="notes">
            <h1>Notes de l'étudiants</h1>
        </section>
    </main>
</body>
+0 -0

j’ai changé mon code et ca marche:

if(notes[i].note<6){
                    
for(var j=0;j<notes[i].note;j++){
        spanNotesBarre.style.width = notes[i].note*50 + "px";
        spanNotesBarre.style.backgroundColor = "red";
                            
                            
                   }    
}
else if(notes[i].note>6){
        for(var j=0;j<notes[i].note;j++){
                            
            spanNotesBarre.style.width = notes[i].note*50 + "px";
                            
        }
                    
}
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte