Ajout/Suppresion personalisé

Question

bon j'ai un champs où je doit remplir une liste d'information, j'ai décidé d'éviter de laisser à l'utilisateur de remplir un champs en séparant les éléments par un ";" ou un truc comme ça
pour se faire j'ai créé deux fonction javascript pour ajouter/supprimer dans cette liste
à chaque fois l'utilisateur clique sur un bouton ajouter la valeur du champs texte est ajouté dans un champs hidden et pour permettre la suppression l'élément luis apparaît sous forme d"un texte avec une petite icone appropriée. j'ai laissez un div pour cela ainsi pour n'afficher que 4 éléments par lignes les élément sont contenu chacun dans span et le span dans div qui va contenir 4 span; ces div sont ajouté au niveau du div que j'i laissé.
mon problème c'est que rien ne se passe lorsque je clique sur ajouter
voici le code:

function AjouterItem()
{
var c =  document.getElementById('Item').value;

var NewDiv = document.createElement("div");
var NewSpan = document.createElement("span");
var texte = document.createTextNode(c+"  '");


var liste  = document.getElementById('ListeItems');

if(liste.childNodes.length == 0)
{
NewDiv.setAttribute("id","Items0");
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewDiv.appendChild(NewSpan);

liste.appendChild(NewDiv);

document.getElementById("Items").value += c;
}
else if(liste.lastChild.childNodes.length == 4)
{
NewDiv.setAttribute("id","Items"+liste.childNodes.length);
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewDiv.appendChild(NewSpan);

liste.appendChild(NewDiv);

document.getElementById("Items").value += ";"+c;
}
else
{
NewSpan.setAttribute("id","Item"+liste.lasChild.childNodes.length);
NewSpan.appendChild(texte);
liste.lasChild.appendChild(NewSpan);

document.getElementById("Items").value += ";"+c;
}
}

function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItem.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}

//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.prentNode.removeChild(objet);
}
}

pc3456 · Answer

autre chose c'est je trouve pas d'où je peux modifier mon sujet je veux rajouter des explications mais bon je vais décrire ici
pour le if(liste.childNodes.length == 0) : si le div principale ne contient aucun div je créé un nouveau avec nouveau span

else if(liste.lastChild.childNodes.length == 4) : si le dernier div fils contient déjà 4 span je crée un nouveau div

else c'est créer juste un span et le mettre dans le dernier div fils

@karamel · Answer

bonjour

j'ai pas tout bien regardé mis deja il y a une ligne qui me parait louche

var texte =  document.createTextNode(c+"  '";

si cette ligne sert a inserer une image c'est pas possible de cette facon il faudrait utiliser innerHtml

var texte  = c+"";

NewSpan.innerHtml=texte;

pc3456 · Answer

merci bien effectivement il y a beaucoup d'erreur sur mon code
c'est la première fois que je crée une fonction qui agit sur le contenu d'une page web et j'ai remarqué beaucoup de chose
déjà il fallait créer un élément img et remplir les attributs par setAttribute
la façon que j'ai fait la il écrit le texte comme il est
deuxième chose c'est que les espace sont compté comme un contenu texte du div c'est pour cela il ne tombe pas sur le premier if le reste contient des erreur de syntaxe donc il n&#8217;exécute rien chose que j'ai remarqué aussi
javascript n'affiche aucune erreur et en plus n'exécute pas le bout de code

je me bat maintenant avec la fonction de suppression...

@karamel · Answer

si tu utilise firefox il existe une extention qui donne le code generé tu poura mieux voire ou sa coince elle se trouve a cette adresse web developer

pc3456 · Answer

ça marche maintenant
pour supprimer il y a un nom de variable incomplet (ListeItems à la place de ListeItem dans la deuxième ligne)+ parentNode à la place de prentNode (dernière ligne du code )voici le code final reste un atout c'est réorganiser les élément après suppression (4 pr ligne) mais je trouve pour le moment délicat

function AjouterItem()
{
var c = document.getElementById('Item').value;

var NewDiv = document.createElement("div");
var NewSpan = document.createElement("span");
var texte = document.createTextNode(c);
var icone = document.createElement("img");
icone.setAttribute("src","./emploi-stage/images/Delete.png");
icone.setAttribute("onClick","javascript:SupprimerItem(this.parentNode,'"+c+"');");
icone.setAttribute("style","cursor:pointer;");

var liste = document.getElementById('ListeItems');

alert(liste.lastChild);
alert(liste.childNodes.length);
if(liste.childNodes.length == 0)
{alert(NewDiv);
NewDiv.setAttribute("id","Items0");
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
NewDiv.appendChild(NewSpan);

liste.appendChild(NewDiv);

document.getElementById("Items").value += c;
}
else if(liste.lastChild.childNodes.length == 4)
{
NewDiv.setAttribute("id","Items"+liste.childNodes.length);
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
NewDiv.appendChild(NewSpan);

liste.appendChild(NewDiv);

document.getElementById("Items").value += ";"+c;
}
else
{
NewSpan.setAttribute("id","Item"+liste.lastChild.childNodes.length);
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
liste.lastChild.appendChild(NewSpan);
alert(liste.lastChild.childNodes.length);
document.getElementById("Items").value += ";"+c;
}	
}
function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItems.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}

//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.parentNode.removeChild(objet);
}
}

pc3456 · Answer

j'ai par vu ton message je trouve très intéressante une telle extension vu que javascript n'affiche pas d'erreurs, merci 
j'avait décidé de ne pas écrire de grandes fonctions avec javascript hhh

pc3456 · Answer

une mise à jour de la fonction supprimer car j'ai oublié de corriger la valeur du champs hidden

function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItems.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}

//mettre les nouvelle valeurs dans le champs hidden
var nouvelleValeur = "";
for(i=0;i<table.length;i++)
{
if(i !=0)
nouvelleValeur += ";"
nouvelleValeur += table[i];
}
document.getElementById("Items").value = nouvelleValeur;

//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.parentNode.removeChild(objet);
}
}

aussi il faut enlever les alert c'était pour les test

Ajout/Suppresion personalisé

7 réponses

Votre réponse

Discussions similaires