Ajouter différentes couleur dynamiquement dans une div [Résolu/Fermé]

Signaler
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
Bonjour,

J'ai presque fini un petit programme et il me manque une option qu'une fois de plus je n'arrive pas à débloquer ..
Le principe : Un tableau comportant dix chiffres maximum ajouté par l'utilisateur grâce à un input en HTML, le résultat de la somme des chiffres du tableau est calculé dans la dernière case, et j'aimerais qu'en fonction des chiffres ajoutés, la div possède un background-color détérminé à l'avance en CSS, pour tous les chiffres de 0 à 9 la div serait verte, de 10 à 19 div jaune, 20 à 29 div bleue et 30 à 36 div rouge, pour les autres chiffres aucune couleur définie
J'ai tenté plusieurs approches mais le code que j'ai ne fonctionne pas, il est soit incomplet soit au mauvais endroit, c'est pour cette raison que je demande encore votre aide

Précedemment c'est grâce à Jordane45 qui m'a énormément aidé que j'ai pu faire le plus gros mais maintenant il me reste à ajouter les couleurs

Voici le code :

HTML:

<!DOCTYPE html>
<html lang=fr>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset ="UTF-8">
        <!--Google Fonts-->
        <link href="https://fonts.googleapis.com/css?family=Hind+Madurai|Cabin+Condensed|Anton&display=swap" rel="stylesheet">
        <!--Bootstrap-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>addition</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body class="container-fluid body">
        <section class="container">
            <div class="row" id="number">
                <form method="POST" action="test.php">
                    <p>
                        <label for="nb">entrez le dernier numéro sorti</label> :<br/>
                        <input type="text" id="nb"><br/>
                        <button type="button" id="valider">Valider</button> 
                    </p>
                </form>
            </div>
            <div class="row" id="numbers">
                <div class="col-md-2" id="total"></div>
            </div>
        </section>

        <script src="js/addition.js"></script>
    </body>
</html>


CSS:
/*-- Body et HTML --*/
body, html{
    margin: 0;
    padding: 0;
}

body{
    background: #085df05c;
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 1.8em;
}

/*-- numéros --*/
#number{
    margin: auto;
    margin-top: 200px;
}

#numbers{
    margin: auto;
}

.chiffres{
    border: 1px solid black;
}

.green{
    background-color: green;
}

.yellow{
    background-color: yellow;
}

.blue{
    background-color: lightseagreen;
}

.red{
    background-color: red;
}

#total{
    border: 2px solid red;
}


JS:
// Le tableau de chiffres
var numbersElt = []; 

// Selection des éléments du DOM
var numbers = document.getElementById("numbers");        
var btn = document.getElementById("valider");
var number = document.getElementById("nb");

// Fonction pour calculer la somme des chiffres du tableau
function sum(input){      
    if (toString.call(input) !== "[object Array]")
    return false;

    var total =  0;
    for(var i=0;i<input.length;i++){                  
        if(isNaN(input[i])){
            continue;
        }
        total += Number(input[i]);
    }
    return total;
}

// Fonction pour créer les élements du tableau
function creaElement(i){
    let total = document.getElementById("total");
    let nbElt = document.createElement("div");
    nbElt.classList.add("col-md-1");
    nbElt.classList.add("chiffres");
    nbElt.textContent = numbersElt[i];
    numbers.insertBefore(nbElt, total);
}

// Fonction pour ajouter les éléments au tableau + affichage des éléments sur le DOM
function pushData(e){
    e.preventDefault 
    var chiffre = number.value;
    numbersElt.push(chiffre);
    console.log('pushdata ',numbersElt.length,number,numbersElt);
    if (numbersElt.length > 10){
        numbersElt.shift();
        console.log('pushdata after shift',numbersElt);
    };
            
    numbers.innerHTML = '<div class="col-md-2" id="total"></div>';
    number.value = "";
    
    for (var i= 0; i < numbersElt.length; i++) {
        creaElement(i);
    };

    let divChiffre = document.getElementsByClassName("chiffres");
    if (numbersElt[i] >= 0 && numbersElt[i] <= 9){
        divChiffre.classList.add = ("green");
    } else if (numbersElt[i] >= 10 && numbersElt[i] <= 19){
        divChiffre.classList.add = ("yellow");
    } else if (numbersElt[i] >= 20 && numbersElt[i] <= 29){
        divChiffre.classList.add = ("blue");
    } else if (numbersElt[i] >= 30 && numbersElt[i] <= 36){
        divChiffre.classList.add = ("red");
    }

    var somme = sum(numbersElt);
    total.append(somme); 
}

// Evnmt pour l'ajout d'un chiffre 
btn.addEventListener("click", pushData);



CodePen: https://codepen.io/Frank-Ngy/pen/BgMrgG

Je vous remercie d'avance ! :)

Configuration: Windows / Firefox 67.0

1 réponse

Messages postés
30356
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 novembre 2020
3 029
Bonjour

Commence par suivre la documentation

https://developer.mozilla.org/fr/docs/Web/API/Element/classList


1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76687 internautes nous ont dit merci ce mois-ci

Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019

Encore une fois merci :) ! Problème réglé !