Menu

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

Messages postés
30
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
12 juillet 2019
- - Dernière réponse : Frank_N
Messages postés
30
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
12 juillet 2019
- 12 juil. 2019 à 22:56
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
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
25947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2019
1706
1
Merci
Bonjour

Commence par suivre la documentation

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


Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 53385 internautes nous ont dit merci ce mois-ci

Frank_N
Messages postés
30
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
12 juillet 2019
-
Encore une fois merci :) ! Problème réglé !
Commenter la réponse de jordane45