Afficher un élément que si une div est manquante [Résolu]

A voir également:Afficher un élément que si une div est manquanteAfficher les éléments d'une arraylist java ✓ - Forum - Java Afficher dossier éléments envoyés outlook 2016 ✓ - Forum - Messagerie Afficher les elements du bureau windows 10 - Conseils pratiques - Windows 10 [html] cacher ou afficher des éléments ✓ - Forum - HTML Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne ✓ - Forum - PHP

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

Forum

A voir également:Afficher un élément que si une div est manquanteAfficher les éléments d'une arraylist java ✓ - Forum - Java Afficher dossier éléments envoyés outlook 2016 ✓ - Forum - Messagerie Afficher les elements du bureau windows 10 - Conseils pratiques - Windows 10 [html] cacher ou afficher des éléments ✓ - Forum - HTML Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne ✓ - Forum - PHP

Web: www.shapebootstrap.net

3 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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.*/ 

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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)

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply
réponses:
  • auteur

    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

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed