11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je voudrais un formulaire où l'on puisse ajouter ou supprimer des champs "réponse", voici ce que j'ai pour le moment.

J'ai 2 problèmes : le premier c'est à l'ajout, le champ et le libellé (Réponse x) ne sont pas sur la même ligne. Mon second problème concerne la suppression d'un champ, seul le champ disparait mais pas le libellé. Voici les 2 fonctions js :
function plus(){
	div=document.getElementById('reponses');
	c2=div.getElementsByTagName('input');
	ind=c2.length+3;
	div.innerHTML +='<p>Réponse '+ind+' : ';
	ch=document.createElement('input');
	
	ch.setAttribute('type','text');
	ch.setAttribute('name','rep'+ind);
	ch.setAttribute('size',40);
	div.appendChild(ch);
	div.innerHTML +='</p>';
}
 
// supprimer le dernier champ;
function moins(){
	if(c2.length>0){div.removeChild(c2[c2.length-1])}
}


Comment corriger ces 2 problèmes ?

Merci
Bonjour !

Je crois que le problème vient du fait que tu crées ton champ et ce que tu appelles un libelle (voir ci-après) de deux manières différentes. Restreins-toi à des createElement et des appendChild, profites-en pour créer du code valide, et cela devrait aller.
Pour créer un libellé pour un champ de formulaire, je te conseille très fortement d'utiliser un élément label (il est exactement fait pour ça!!!):

<label for="champRep">Réponse</label><input id="champRep"... />


Pour ta seconde question, c'est... normal. c2 contient les champs input contenus dans ton div. Donc quand tu supprimes un c2(quelquechose), tu ne peux pas supprimer autre chose qu'un input. Ton libellé étant dans un paragraphe, ne peut être supprimé. Si tu utilises un label, le problème est plus simple à régler:
1. cela t'oblige à associer un id à ton champ de saisie (ce qui simplifie son identification, sans passer par un tableau)
2. tu peux identifier et par conséquent supprimer sans difficulté le label correspondant, en tout cas plus facilement qu'avec un simple p...