Sujet Précédent Sujet Suivant

Afficher un élément que si une div est manquante

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 - 13 juil. 2019 à 17:49
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 14 juil. 2019 à 10:36
Bonjour,

Je suis en train de terminer un programme et pour le finaliser j'aimerais faire en sorte d'afficher un message que si une div en particulier est manquante
Il y a 4 div créees dynamiquement en fonction des chiffres que l'utilisateur rentre, et j'aimerais que le message final s'affiche seulement si une de ses div est manquante.. Je vous laisse le code ci dessous pour vous aider à y voir plus clair :

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">
                        <button type="button" id="valider">VALIDER</button>
                        <p id="message"></p> 
                    </p>
                </form>
            </div>
            <div class="row" id="numbers">
                <div class="col-md-2" id="total"></div>
            </div>
            <div class="row" id="resultat"></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;
}

#valider{
    background-color: #358c0e;
    color: white;
    border-radius: 10px;
}

#numbers{
    margin: auto;
}

.chiffres{
    border: 1px solid black;
    padding-left: 30px;
}

.green{
    background-color: green;
}

.yellow{
    background-color: yellow;
}

.blue{
    background-color: lightseagreen;
}

.red{
    background-color: red;
}

#total{
    background-color: #f39c1a;
    padding-left: 65px;
}

#resultat{
    margin-top: 20px;
    margin-left: 10px;
}


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");
var resultat = document.getElementById("resultat");
var message = document.getElementById("message");

// 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.className = "col-md-1";
    nbElt.classList.add("chiffres");
    nbElt.textContent = numbersElt[i];

    // Determine la couleur de la div en fonction du chiffre entré
    if (numbersElt[i] >= 0 && numbersElt[i] <= 9){
        nbElt.classList.add("green");
    } else if (numbersElt[i] >= 10 && numbersElt[i] <= 19){
        nbElt.classList.add("yellow");
    } else if (numbersElt[i] >= 20 && numbersElt[i] <= 29){
        nbElt.classList.add("blue");
    } else if (numbersElt[i] >= 30 && numbersElt[i] <= 36){
        nbElt.classList.add("red");
    }
    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;
    if (chiffre > 36){
        message.innerHTML = "Vous ne pouvez pas rentrer un chiffre plus grand que 36"
    } else {
        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 = "";
    
    // Création de la div en fonction du chiffre entré 
    for (var i= 0; i < numbersElt.length; i++) {
        creaElement(i);
    };

    // Calcul de la somme des chiffres du tableau
    var somme = sum(numbersElt);
    total.append(somme);
    
    // Récupère le dernier chiffre de la somme
    var result = somme.toString()[2]

    // Selection des éléments crées dynamiquement
    var green = document.getElementsByClassName("chiffres green");
    var yellow = document.getElementsByClassName("chiffres yellow");
    var blue = document.getElementsByClassName("chiffres blue");
    var red = document.getElementsByClassName("chiffres red");

    // Renvoi une suite de chiffres en fonction du résultat de la somme du tableau
    if (numbersElt.length < 10){
        var phrase = "Pas de numéros à jouer"
    } else if(result === "3" || result === "1"){
        var phrase = "Jouez les numéros suivants : 1-3-11-13-21-23-21-33";
    } else if (result === "6" || result === "8"){
        var phrase = "Jouez les numéros suivants : 6-8-16-18-26-28-36";
    } else if (result === "0"){
        var phrase = "Jouez les numéros suivants : 0-2-10-12-20-22-30-32";
    } else if (result === "5"){
        var phrase = "Jouez les numéros suivants : 5-7-15-17-25-27-35";
    } else if (result === "2" || result === "4"){
        var phrase = "Jouez les numéros suivants : 2-4-12-14-22-24-32-34";
    } else if (result === "7" || result === "9"){
        var phrase = "Jouez les numéros suivants : 7-9-17-19-27-29";
    } else if (!green || !yellow || !blue || !red){
        var phrase = "Pas de numéros à jouer";
    }
    
    // Ajout du résultat dans le DOM
    resultat.innerHTML = "";
    resultat.append(phrase);
}

// Evnmt click sur bouton valider
btn.addEventListener("click", pushData);


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

Merci d'avance ! :)

Configuration: Windows / Firefox 67.0

3 réponses

Réponse 1 / 3
raisedead
Modifié le 13 juil. 2019 à 18:06
Salut ,
soit vous comptez les div concernées et si >3 vous afficher le message e dans ce cas il faut ajouter un moyen d'identifier les div pour les compter; par exemple en comptant dans l’élément parent si vous n'avez que les divs concernés, sinon il suffit de les nommer ou d'attribuer une class identique. 
ex:
 if(premierDIV.parentNode.getElementBytagName('div').length>3) {//alors ...

Ou encore mieux vous utilisez la condition de base que vous gardez à la création des divs ce qui est mieux et plus simple puisque vous avez déjà la condition lors de la création des divs.

Je trouve ceci curieux dans votre code: 
    resultat.innerHTML = "";
    resultat.append(phrase);

/*car pourquoi pas plus simple, plus clair(utiliser des primaires quand il y en a = moins de travail pour le processeur qu'une fonction), en plus c'est la seule fn JQuery(que je voit) du script donc fichier + léger = page + rapide si on vire je JQuery*/

resultat.innerHTML=phrase;// vu que la variable est une chaîne


au passage structurellement beaucoup mieux:
var phrase = '';
if (numbersElt.length < 10){
        phrase = "Pas de numéros à jouer"
    } else if(result === "3" || result === "1"){
        phrase = "Jouez les numéros suivants : 1-3-11-13-21-23-21-33";
/*et ainsi de suite, moins de code, moins de déclaration de variable(qui est la même) donc meilleur code efficacité(poids du fichier...)  et lecture */
/* astuce 2 on peut utiliser éventuellement la variable 'phrase' pour débog si c'est aucun des cas (qui sera nulle)alors qu'avec votre méthode elle n'existera pas.*/
0
Réponse 2 / 3
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
13 juil. 2019 à 18:08
En effet la petite curiosité dans le code est simplement du à un manque de logique de ma part ^^"

En revanche je n'arrive pas à bien cerner votre réponse, quand vous dites "la condition de base" vous parlez de celle qui détérmine la couleur des div ? Est-ce qu'il serait possible d'avoir plus d'indices ? Mon niveau n'est pas encore au point x)
0
Réponse 3 / 3
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
14 juil. 2019 à 01:54
Vraiment rien à faire je n'y parviens pas, j'ai essayé avec Jquery aussi mais je n'arrive pas du tout à faire ce dont j'ai besoin, n'afficher les messages que si une div de couleur est manquante..

Le code ressemble à ça maintenant mais le problème reste le même :

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">
                        <button type="button" id="valider">VALIDER</button>
                        <p id="message"></p> 
                    </p>
                </form>
            </div>
            <div class="row" id="numbers">
                <div class="col-md-2" id="total"></div>
            </div>
            <div class="row" id="resultat"></div>
        </section>

        <!-- JQuery -->
        <script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous">
        </script>
        <!-- Dossier JS -->
        <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;
}

#valider{
    background-color: #358c0e;
    color: white;
    border-radius: 10px;
}

#numbers{
    margin: auto;
}

.chiffres{
    border: 1px solid black;
    padding-left: 30px;
}

#green{
    background-color: green;
}

#yellow{
    background-color: yellow;
}

#blue{
    background-color: lightseagreen;
}

#red{
    background-color: red;
}

#total{
    background-color: #f39c1a;
    padding-left: 65px;
}

#resultat{
    margin-top: 20px;
    margin-left: 10px;
}


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");
var resultat = document.getElementById("resultat");
var message = document.getElementById("message");

// 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.className = "col-md-1";
    nbElt.classList.add("chiffres");
    nbElt.textContent = numbersElt[i];

    // Determine la couleur de la div en fonction du chiffre entré
    if (numbersElt[i] >= 0 && numbersElt[i] <= 9){
        nbElt.id = "green";
    } else if (numbersElt[i] >= 10 && numbersElt[i] <= 19){
        nbElt.id = "yellow";
    } else if (numbersElt[i] >= 20 && numbersElt[i] <= 29){
        nbElt.id = "blue";
    } else if (numbersElt[i] >= 30 && numbersElt[i] <= 36){
        nbElt.id = "red";
    }

    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;
    if (chiffre > 36){
        message.innerHTML = "Vous ne pouvez pas rentrer un chiffre plus grand que 36"
    } else {
        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 = "";
    
    // Création de la div en fonction du chiffre entré 
    for (var i= 0; i < numbersElt.length; i++) {
        creaElement(i);
    };

    // Calcul de la somme des chiffres du tableau
    var somme = sum(numbersElt);
    total.append(somme);
    
    // Récupère le dernier chiffre de la somme
    var result = somme.toString()[2]

    // Selection des éléments crées dynamiquement
    var green = $("#green");
    var yellow = $("#yellow");
    var blue = $("#blue");
    var red = $("#red");

    // Renvoi une suite de chiffres en fonction du résultat de la somme du tableau
    var phrase = "";
    if (numbersElt.length < 10){
        phrase = "Pas de numéros à jouer"
    } else if(result === "3" || result === "1"){
        phrase = "Jouez les numéros suivants : 1-3-11-13-21-23-21-33";
    } else if (result === "6" || result === "8"){
        phrase = "Jouez les numéros suivants : 6-8-16-18-26-28-36";
    } else if (result === "0"){
        phrase = "Jouez les numéros suivants : 0-2-10-12-20-22-30-32";
    } else if (result === "5"){
        phrase = "Jouez les numéros suivants : 5-7-15-17-25-27-35";
    } else if (result === "2" || result === "4"){
        phrase = "Jouez les numéros suivants : 2-4-12-14-22-24-32-34";
    } else if (result === "7" || result === "9"){
        phrase = "Jouez les numéros suivants : 7-9-17-19-27-29";
    } else if (green.length > 0 || yellow.length > 0 || blue.length > 0 || red.length > 0){
        phrase = "Pas de numéros à jouer";
    }
    
    // Ajout du résultat dans le DOM
    resultat.innerHTML = phrase;
}

// Evnmt click sur bouton valider
btn.addEventListener("click", pushData);


CodePen: https://codepen.io/Frank-Ngy/pen/BgMrgG
0
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
14 juil. 2019 à 10:36
C'est bon, j'ai réussi ! Après pas mal d'heures d'essais .. vous pourrez trouver la résolution sur le codePen mis à jour : https://codepen.io/Frank-Ngy/pen/BgMrgG
0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Axymimi -

12 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
=Si la cellule A1 a du texte = B1 devient couleur
jsecours -
huhh -

8 réponses