Ajouter différentes couleur dynamiquement dans une div

Résolu

Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention -
Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention - 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

A voir également:

Ajouter différentes couleur dynamiquement dans une div
Excel cellule couleur si condition texte - Guide
Boite a couleur - Télécharger - Divers Photo & Graphisme
Ajouter une signature sur word - Guide
Ajouter agenda outlook dans google agenda - Guide
Ajouter une liste déroulante excel - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour

Commence par suivre la documentation

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

Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

sertissage des cables rj45

Changer la couleur de fond d'un en-tête

Comment savoir comment on nous a ajouté sur Snap

Couleur transparente

Votre réponse

Discussions similaires