Bonjour,
Je viens de debuter dans la programmation web et je me retrouve confronté à un probleme commençon deja par le code:

function ajoutIngredient()
{

Type[i] = encodeURIComponent(document.getElementById("Type").value);
NomIng[i] = encodeURIComponent(document.getElementById("NomIng").value);
Qte[i] = encodeURIComponent(document.getElementById("Qte").value);

document.getElementById('output').innerHTML += "Type : "+Type[i]+" Nom de l'ingredient : "+NomIng[i]+" Quantite : "+Qte[i]+" dose(s)"+'<br/>';
i+=1;
}

<div id="output">
<button onclick="ajoutIngredient();">Ajouter l'ingredient</button>
<br/>
</p>
</div>

Alors voila le problème je rajoute bien mes éléments au div tout ce passe très bien mais ce que j'aimerais c'est en face de chaque ligne Type: "****" Ingredient : "*****" Quantité : "*****" je puisse rajouter un bouton supprimer qui me supprime ma ligne en question ainsi que les éléments correspondant dans mon tableau.
Je ne vois pas comment repérer ma ligne (comment retrouver l'indice i?) et comment supprimer la ligne en question dans le div en gros supprimer mon élément qui se trouve à l'intérieur de la div?
Enfin une question un peu annexe mes champs pour renseigner les variables NomIng et Qte se font par des input existe-t-il un moyen de vérifier que ces champs ne sont pas vide à partir du HTML ou suis obliger de le vérifier dans le Javascript

En vous remerciant d'avance

Je commence par la fin : je crois que t'es obligé de passer par JS pour vérifier que les champs de sont pas vides.


Ensuite, pour le coeur du problème, je ne peux que te conseiller de te mettre au DOM

Ainsi, tu créeras explicitement des éléments HTML (des <p> par exemple) pour y placer chaque ligne, tu créeras explicitement un bouton auquel tu pourras attribuer un joli onclick et tout et tout.

Renseigne toi sur les méthodes createElement et appendChild

Le problème d'utiliser dom c'est qu'une fois que les variable Type NomIng et Qte sont correcte l'utilisateur valide le tout et les variable sont envoyées à l'aide de la méthode post à un php qui sauvegarde le tout dans un xml donc faire un xml intermédiaire je trouve ça lourd

... ... Tu veux des solutions ou pas ?


Sinon, tu peux aussi mettre des <p> et des <button> directement via ton innerHTML actuel mais cay super moche.
Avec un getElementsByTagName sur les <p>, tu retrouveras le i pour savoir de quelle ligne il s'agit.

Sinon tu peux toujours t'amuser à récupérer le innerHTML du div et le splitter par rapport aux <br /> pour en extraire chaque ligne.
Ensuite en fonction du numéro de la ligne, tu retrouves ton i.
Mais là cay encore plus moche.


Le DOM, c'est bien, c'est beau, c'est Bosch.



Note : Pourquoi t'as un </p> qui se balade dans ton code ?

Je vais donc essayer de faire ça de manière jolie avec du dom en faite se sera même peut être plus simple vu que j'en ai déjà fais pour la sauvegarde et la lecture de mon fichier xml (qui me sert de base de donnée).

Pour le </p> qui se ballade c'est parce-que je n'ai mis que la partie du code concerné et j'ai sélectionné un peu trop lol

Je te remercie pour ton aide rapide et efficace


Edit:
Je viens de changer le code pour utiliser dom (ça fait un peu plus propre quand meme) voila donc mon nouveau code:

function ajoutIngredient()
{

var nouveauType = document.createElement('type');
var nouvelleQte = document.createElement('qte');
var nouveauNom = document.createElement('NomIng');
var nouveauIngredient = document.createElement('ingredient');

//Recuperation des valeur taper par l'utilisateur
Type[i] = encodeURIComponent(document.getElementById("Type").value);
NomIng[i] = encodeURIComponent(document.getElementById("NomIng").value);
Qte[i] = encodeURIComponent(document.getElementById("Qte").value);

//affectation des valeurs au noeud
TypeS = document.createTextNode(Type[i]);
QteS = document.createTextNode(Qte[i]);
NomIngS = document.createTextNode(NomIng[i]);


//Mise en place des valeurs des elements


nouveauNom.appendChild(NomIngS);
nouveauType.appendChild(TypeS);
nouvelleQte.appendChild(QteS);


//Mise en place des enfants

nouveauIngredient.appendChild(document.createTextNode("  Type : "));
nouveauIngredient.appendChild(nouveauType);
nouveauIngredient.appendChild(document.createTextNode("			Nom : "));
nouveauIngredient.appendChild(nouveauNom);
nouveauIngredient.appendChild(document.createTextNode("			Quantite : "));
nouveauIngredient.appendChild(nouvelleQte);


document.getElementById('output').appendChild(nouveauIngredient);
document.getElementById('output').innerHTML +='   <button onclick="supprIng(i)">Supprimer Ingredient</button>';
document.getElementById('output').innerHTML +='<br/>';

i++;

}

<div id="output"></div>

Mon affichage se fait correctement le probleme vient du bouton supprimer en faite j'aimerais lui passer en argument l'indice i (en faite qui serais l'indice des elements de mes 3 tableaux a supprimer mais ça n'a pas l'air possible) je ne vois donc pas trop comment faire pour supprimer les elements de mes array et aussi le supprimer du div?

Personne n'a d'idée?

Il faudrait que tu soit plus explicite... car là dans ton code je ne vois pas ta fonction supprIng ou n'importe quel code qui essaie de supprimer des éléments.

Pour supprimer des éléments en DOM tu peux utiliser: element_parent.removeChild(element_a_supprimer)
donc il s'agit surtout d'identifier tes éléments à supprimer. Par exemple tu peux ajouter à tes éléments un id au moment où tu les crées. Ce qui pourrait donner:

nouveauIngredient.id="nouveauIngredient"+i;

et dans ta fonction de suppression tu peux les atteindre par leur id (qui change en fonction de i)

Houla mais attends, c'est pas du XML que tu fais, si ?

Le paramètres que tu donnes à createElement(), c'est le nom de la balise !

Donc si tu mets "NomIng" ça va te faire une balise <noming>...


De plus, n'utilise pas innerHTML à la fin. Maintenant que tu fais ça proprement, fais le entièrement, en créant aussi le bouton avec createElement()

Non il n'y a pas XML derrière c'est juste pour l'affichage que je créer les noeuds ainsi que tout le reste. Je ne savais que je pouvais mettre des boutons dans un createElement().

Pour la fonction de suppression je ne l'ai pas indiqué car pour le moment elle est vide...

Donc en faisant appel à ma fonction supprimer et en lui passant en paramètre l'id de nouvelle ingrédient je pourrai le supprimer je vais tester mais j'ai peur que ça me supprime le dernier en faite que je click sur le bouton il prendra le dernier indice rentré

Modifie donc ton code de sorte à créer un <p> (donc document.createElement('p'))

Et dans ce <p>, tu insères un textNode contenu le Type, Qte, et NomIng

Ensuite, tu crées un bouton (document.createElement('button')) que tu insères aussi dans le <p>.

Et sur ce bouton, tu pourras appliquer dynamiquement un événement onclick

Ensuite, poste ton nouveau code.

Voila j'ai essayé de mofifier mon code (cette fois je vous poste tout le javascript):

<script type="text/javascript">

var i=0;
var Type = new Array();
var nomIng = new Array();
var Qte = new Array();

//creation d'un noeud coktail ainsi que tout ses elements
var nouveauCoktail = document.createElement('coktail');
var nouvelleNote = document.createElement('note');
var nouveauCommentaire = document.createElement('commentaire');
var nouveauIngredient = document.createElement('ingredient');
var TypeS;
var QteS;
var NomIngS;
var nom;
var note;
var meSsage;

function supprIng()
{

alert("suppression ok");
}




function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

function setValue()
{

var xhr = getXMLHttpRequest();





nom = encodeURIComponent(document.getElementById("nom").value);
note = encodeURIComponent(document.getElementById("note").value);
meSsage = encodeURIComponent(document.getElementById("message").value);

if (nom == "")
{
alert("Erreur : Aucun nom de cocktail!");
exit;
}
if ((isNaN(note)) || (note>10) || (note<0) || (note == ""))
{
alert("Erreur : Note non comprise entre 0 et 10!");
exit;
}

if (i<= 1)
{
alert("Erreur : Il doit y avoir au moins 2 ingredients!");
exit;
}

//Conversion des array en chaine de caractere
	var TypeV = Type.toString();
	var QteV = Qte.toString();
	var nomIngV = nomIng.toString();
	var nbIng = i;


	
xhr.open('POST', 'cibleCreaCoktail.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');	
xhr.send("TypeV="+TypeV+"&QteV="+QteV+"&nomIngV="+nomIngV+"&nom="+nom+"&note="+note+"&meSsage="+meSsage+"&nbIng="+nbIng);
alert("Coktail enregistre dans la base de donnee");
location.reload();
}


function ajoutIngredient()
{

var nouveauType = document.createElement('type');
var nouvelleQte = document.createElement('qte');
var nouveauNom = document.createElement('NomIng');
var nouveauIngredient = document.createElement('ingredient');

//Recuperation des valeur tapées par l'utilisateur
Type[i] = encodeURIComponent(document.getElementById("Type").value);
nomIng[i] = encodeURIComponent(document.getElementById("NomIng").value);
Qte[i] = encodeURIComponent(document.getElementById("Qte").value);

//verifiacation des valeurs tapées par l'utilisateur
if (nomIng[i] == "")
{
alert("Erreur : Nom de l'ingredient non valide!");
exit;
}

if ((isNaN(Qte[i])) || (Qte[i]<0) || (Qte[i] == ""))
{
alert("Erreur : Quantite rentree non valide!");
exit;
}


//affectation des valeurs au noeud
TypeS = document.createTextNode(Type[i]);
QteS = document.createTextNode(Qte[i]);
NomIngS = document.createTextNode(nomIng[i]);

//Mise en place des valeurs des elements
nouveauNom.appendChild(NomIngS);
nouveauType.appendChild(TypeS);
nouvelleQte.appendChild(QteS);


//bouton de supression
var boutonSup = document.createElement('button');
boutonSup.setAttribute('value','Supprimer');
boutonSup.onclick = supprIng();

//Mise en place des enfants
nouveauIngredient.appendChild(document.createTextNode('Type : '));
nouveauIngredient.appendChild(nouveauType);
nouveauIngredient.appendChild(document.createTextNode(' || Nom : '));
nouveauIngredient.appendChild(nouveauNom);
nouveauIngredient.appendChild(document.createTextNode(' || Quantite : '));
nouveauIngredient.appendChild(nouvelleQte);
nouveauIngredient.appendChild(boutonSup);


document.getElementById('output').appendChild(nouveauIngredient);
document.getElementById('output').innerHTML +='<br/>';

i++;

}

</script>

Mon bouton apparait bien mais celui-ci n'a pas de nom (j'ai essayé aussi avec boutonSup.value="Supprimer" mais il n'a toujours pas de nom) de plus dès que ma fonction ajoutIngredient() est exécute il exécute aussi celui de supprIng() mais quand je click sur mon bouton sans nom il n'exécute pas ma fonction pourtant j'ai regarder sur internet ma méthode pour le créer à l'air correcte.

Hm... je crois vraiment que tu n'as pas compris grand chose au DOM...

Tu continues à créer des éléments qui n'existent pas en HTML !

Je sais plus quoi faire là...

(Par contre, je kiffe monumentalement ton paradoxe de la ligne 92. Recharger la page après une requête Ajax (faite pour s'effectuer sans rechargement...), c'est très très fort ! )