Sujet Précédent Sujet Suivant

Ajouter différentes couleur dynamiquement dans une div

Résolu/Fermé
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 12 juil. 2019 à 20:36
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 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
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
12 juil. 2019 à 22:32
Bonjour

Commence par suivre la documentation

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


1
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
12 juil. 2019 à 22:56
Encore une fois merci :) ! Problème réglé !
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
Changer la couleur de fond d'un en-tête
Adamantine -
Adamantine -

2 réponses