Soyez le premier à donner votre avis sur cette source.
Vue 3 473 fois - Téléchargée 228 fois
<html> <head> <script language="javascript" type="text/javascript"> // Vérifie si les limites imposer sont respecter // _ retourne true si le nombre est dans les limites définit // _ retourne false si le nombre dépasse une des limites fixées function checkLimit(num) { // Passe en parametre un nombre à la fonction // Définit la limite haute (penser à votre limite * 2) --problème avec IE var limitTop = 20; // Définir la limite basse var limitBottom = 0; // Effectue la vérification sur le nombre if (num > limitTop) { // Vérification de la limite haute return false; // Retourne le booléen false si le nombre est suppérieure à la limite haute } else if (num < limitBottom) { // Vérifie la limite basse return false; // Retourne le booléen false si le nombre est inférieur à la limite basse } else { // Les deux cas ou il y aurai un dépassement des limites ont été effectués return true; // Retourne le booléen true pour dire que les limites ne sont pas dépassés } } // Fonction du boutton qui permet de rajouter un objet enfant (objectIdChild) dans un objet parent (objectIdParent) function buttonMore(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour dénommer l'objet parent et l'objet enfant var number = countObjects(document.getElementById(objectIdParent)); // Récupère le nombre d'objet que contient l'objet parent et le met dans la variable "number" // Utilise la fonction de vérification des limites avec le nombre récupérer. Il faut additionner 1 car l'on veut ajouter un objet. if (checkLimit(number + 1)) { // Le résultat renvoie un booléen afin de savoir si la limite est dépasser (false) ou pas (true) => false(refuse)/true(autorise) l'action suivante createObject(objectIdParent, objectIdChild); // On appel la fonction de création d'objet en lui donnant comme paramètres l'objet parent (qui va contenir) et l'objet enfant (qui va être contenu) return true; // Retourne le booléen true, pas obligatoire, mais pratique si l'on rajoute un gestionnaire d'erreurs } else { // Si le booléen retourner est false alors c'est que la limite maximum à été atteinte alert("Limit exceded."); // On affiche à l'utilisateur que la limite maximum à été atteinte et qu'il ne peut pas créer un nouvelle objet return false; // Retourne le booléen false, pas obligatoire, mais pratique si l'on rajoute un gestionnaire d'erreurs } } // Fonction du boutton qui permet d'enlever un objet enfant (objectIdChild) dans un objet parent (objectIdParent) function buttonLess(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour définir l'objet parent et l'objet enfant qui sont utilisés var number = countObjects(document.getElementById(objectIdParent));// Récupère le nombre d'objet que contient l'objet parent et le met dans la variable "number" // Utilise la fonction de vérification des limites avec le nombre récupérer. Il faut soustraire 1 car l'on veut supprimer un objet. if (checkLimit(number - 1)) { // Le résultat renvoie un booléen afin de savoir si la limite est dépasser (false) ou pas (true) => false(refuse)/true(autorise) l'action suivante removeObject(objectIdParent, objectIdChild); // On appel la fonction de suppression d'objet en lui donnant comme paramètres l'objet parent (qui contient) et l'objet enfant (qui va être supprimer) return true; } else { // Si le booléen retourner est false alors c'est que la limite minimum à été atteinte alert("Limit exceded."); // On affiche à l'utilisateur que la limite minimum à été atteinte et qu'il ne peut pas supprimer un objet car il n'existe pas return false; } } // Fontion qui permet de créer un objet (objectIdChild) dans un autre (objectIdParent) et rajoute un saut de ligne function createObject(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour dénommer l'objet parent et l'objet enfant var obj_parent = document.getElementById(objectIdParent); // Récupère les valeurs de l'objet parent afin de pouvoir le manipuler var idNumber = countObjects(obj_parent); // Création et ajout d'attribut à l'objet enfant var obj_child = document.createElement(objectIdChild); // Création de l'objet enfant obj_child.setAttribute("id", (objectIdChild + (idNumber / 2))); // Ajout de l'attribut id -- afin de pouvoir manipuler facilement les objet je dirait qu'il est obligatoire les autres reste optionnel suivant les objet manipulé obj_child.setAttribute("name", (objectIdChild + (idNumber / 2))); // Ajout de l'attribut name obj_child.setAttribute("type", "text"); // Ajout de l'attribut type -- pour l'exemple ce sera un text peu être modifié à volonté obj_child.setAttribute("value", (idNumber / 2)); // Ajout d'une valeur par defaut construite à partir du nombre d'objet de l'objet parent obj_parent.appendChild(obj_child); // Ajout de l'objet enfant avec tous ces attributs dans l'object parent (à la fin de celui-ci) // Création et ajout dans l'objet parent d'un objet poyur le saut de ligne (afin d'avoir une colonne var obj_br = document.createElement('br'); // Création de l'objet de retour à la ligne obj_br.setAttribute("id", ("br" + (idNumber /2))); // Ajout d'un attribut d'id afin de pouvoir le manipuler obj_br.setAttribute("name", ("br" + (idNumber / 2))); // Ajout d'un attribut name pour pouvoir utiliser différentes fonction de JavaScript obj_parent.appendChild(obj_br); // Ajout de l'objet retour à la ligne dans l'objet parent } // Fonction de suppression d'un objet enfant dans un objet parent function removeObject(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour spécifier l'objet parent et l'objet enfant var obj_parent = document.getElementById(objectIdParent); // Récupère les valeurs de l'objet parent afin de pouvoir le manipuler var idNumber = ((countObjects(obj_parent) / 2) - 1); // Appel de la fonction de comptage des objets enfants et mise du résultat dans une variable obj_parent.removeChild(document.getElementById(objectIdChild + idNumber)); // Supprime l'objet enfant d'après son id obj_parent.removeChild(document.getElementById("br" + idNumber)); // Supprime l'objet retour à la ligne d'après son id } // Fonction qui compte le nombre d'objets contenu dans un objet function countObjects(object) { // Passe en paramètre l'objet sur lequel le comptage sera effectué return (object.childNodes.length); // Compte le nombre d'objet renfermer et le retour ne à la fonction appelante } </script> </head> <body> <!-- Pour l'exemple j'utilise une div dans laquelle j'ajoute des input de type text. Vous pouvez la modifier, afin de partir d'un autre élément et d'en créer des éléments différents (avec d'autres attributs aussi). Une petite chose, mettre au moins le parent en dur, je n'ai pas réussit à manipuler directement du body, mais si des gens savent ... --> <input type="submit" value="+" id="Submit1" onclick="return buttonMore('div_input', 'input')" /> <input type="submit" value="-" id="Submit1" onclick="return buttonLess('div_input', 'input')" /> <br /> <div name="div_input" id="div_input"></div> </body> </html>
D'abord je vous remercie pour vos commentaires.
Je n'ai pas encore étudier ta proposition MANGAII, mais quand j'en aurai le temps le reprendrais mon code pour le rendre plus générique.
Et j'espère que tu en seras pleinement satisfait MGALTERO.
J'ai fait ce bout de code sans avoir de connaissances particulière en JavaScript.
Mon objectif, c'était qu'il ne soit pas trop difficile à maintenir et simple d'utilisation.
Je vais quand même essayer de m'améliorer dans cette technologie.
Merci encore pour vos réponses.
@+ lycanges
Moi qui suis complètement nez-au-fite, je viens de tester et je trouve ça super !
Je vais dépesser pour tout comprendre.
Je garde au chaud. Reste à savoir où utiliser... Mais je trouverai bien.
Merci lycanges
MG
- Pense à simplifier et à mutualiser !
- N'oublie pas que tu peux aussi passer des paramètres à tes fonctions.
- Utilise des variables "globales" pour les limites (et pourquoi pas le comptage)
Globales : limiteTop LimiteBottom ne doivent pas être définies plusieurs fois ! c'est un risque d'erreur (d'en oublier). Sors ces variables des fonctions, elles seront accessibles dans les fonctions, directement (sans le var).
Par la même occasion, tu peux mettre en globales (hors fonction) une variables qui compte combien tu as d'éléments (ça éviterai d'avoir à recompter à chaque fois) (ex: var countInput=0;)
Quand tu appelle buttonMore() et buttonLess(), donne en paramètres le nom du div pour afficher les inputs. C'est simple, mais ça permet de dissocier tes fonctions du code HTML ! C'est pas bien de forcer l'utilisateur à devoir appeler son div 'div_input' (et si je veux l'appeler autrement ?). En utilisant "buttonMore('MonDivAMoi');", tu ouvre la porte à la possibilité d'avoir plusieurs divs avec des inputs différents ...
Dans les fonctions buttonMore et buttonLess tu teste exactement la même chose : les limites ! créé une fonction checkLimites(n), qui fait les tests et renvoi true/false !
Comme ça, ta fonction fonction buttonMore se résume à:
var limitTop = 20;
var limitBottom = 0;
var number = 0;
function buttonMore( nomDiv )
{
if( checkLimites( number + 1 ) ) // teste si on peut ajouter
{
createInput( nomDiv );
}
}
J'espère que j'ai été clair ...
Je te laisse continuer.
Nico
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.