11540 sujets

JavaScript, DOM et API Web HTML5

Problème avec varriable globale

Bonjour,

je veux créer une page qui permette a l'utilisateur d'ajouter les chapitres et des cours de son propre formation.

pour se faire j'ai 2 boutons, un pour ajouter des chapitres et l'autre pour ajouter des cours au sein d'un chapitre, voici le résultat de mon code : http://test20142014.esy.es/test.html

le problème c'est que losrque j'ajoute un chapitre exp : chapitre n° 2 et je clique sur le bouton ajouter un cours qui se trouve dans chapitre n° 2 le cours sera ajouter dans le premier chapitre (chapitre n° 1 ), donc l'ajout des cours se fixe sur chapitre n° 1

voici mon code complet : 


<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
	 <link href="style.css" rel="stylesheet">
  </head>
  <body> 
	<div id="chapitres">
		<div id="chapitre1" class="chap">
			<h3>chapitre n° 1</h3>
			<div id="lescours">
				<div id="" class="cours">
					<h4>cours 1</h4>
					<label>titre :</label>
					<input type="text"/>
				</div>
			</div>
			<a href="#" id="addcours" onclick=ajoutercours()>ajouter un cours</a>
		</div><!-- chapitre1 -->
	</div>
	<a href="#" id="addchapitre" onclick=ajouterchapitre()>ajouter un chapitre</a>
	
	<script type="text/javascript">
		var global_ID = 2; 
		var numcours=2;
		function GetID() { 
			return global_ID++; 
		}
		function ajoutercours() {
			var pluus = document.createElement('div');
			pluus.innerHTML = "<div class='cours'><h4>cours "+numcours+"</h4><label>titre :</label><input type='text'/></div>";
			document.getElementById('lescours').appendChild(pluus);
			numcours++;
		}
		function ajouterchapitre() {
			numChapitre=GetID();
			var pluus = document.createElement('div');
			pluus.className='chap';
			pluus.innerHTML = "<h3>chapitre n° "+numChapitre+"</h3><div id='lescours'><div class='cours'><h4>cours 1</h4><label>titre :</label><input type='text'/></div></div><a href='#' id='addcours' onclick=ajoutercours()>ajouter un cours</a>";
			document.getElementById('chapitres').appendChild(pluus);
		}
	</script>		
  </body>
</html>


Merci d'avance pour votre aide Smiley smile

Cordialement,
Modifié par withColors (02 Oct 2014 - 15:20)
salut,
c'est normal vu que concrètement un ID doit être unique dans ton document. Tu utilises les mêmes IDs pour chaque chapitre crée et JS retournera toujours le premier (même si c'est faux d'en utiliser plusieurs).
Tu peux faire beaucoup plus simplement en remplaçant

document.getElementById('lescours').appendChild(pluus);

par

this.parentNode.appendChild(pluus);

Si tu te soucies des vieux IE, tu devras passer par l'objet Event pour récupérer le bouton cliqué, pour ensuite récupérer son parent.
Merci Zelalsan, mais après l'utilisation de 
 this.parentNode.appendChild(pluus);
j'ai aucun résultat, l'ajout ça marcha pas !
Oui, c'est parce qu'en temps normal, tu devrais écrire un code un plus propre que ça.
Pour que ça marche, il faut passer le "this" à ta fonction et le récupérer via un argument.
Pour avoir le bon effet, il faudra passer par ".insertBefore()" et non ".appendChild()".
Tu devrais aussi annuler l'action par défaut du clic, si non le scroll renvera en haut de page à chaque fois.
Tu te rendras compte aussi que ta numérotation est mauvaise dans sa conception.

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
	 <link href="style.css" rel="stylesheet">
  </head>
  <body> 
	<div id="chapitres">
		<div id="chapitre1" class="chap">
			<h3>chapitre n° 1</h3>
			<div id="lescours">
				<div id="" class="cours">
					<h4>cours 1</h4>
					<label>titre :</label>
					<input type="text"/>
				</div>
			</div>
			<a href="#" id="addcours" onclick="ajoutercours(this);return false">ajouter un cours</a>
		</div><!-- chapitre1 -->
	</div>
	<a href="#" id="addchapitre" onclick="ajouterchapitre();return false">ajouter un chapitre</a>
	
	<script type="text/javascript">
		var global_ID = 2; 
		var numcours=2;
		function GetID() { 
			return global_ID++; 
		}
		function ajoutercours(that) {
			var pluus = document.createElement('div');
			pluus.innerHTML = "<div class='cours'><h4>cours "+numcours+"</h4><label>titre :</label><input type='text'/></div>";
			that.parentNode.insertBefore(pluus, that);
			numcours++;
		}
		function ajouterchapitre() {
			numChapitre=GetID();
			var pluus = document.createElement('div');
			pluus.className='chap';
			pluus.innerHTML = "<h3>chapitre n° "+numChapitre+"</h3><div id='lescours'><div class='cours'><h4>cours 1</h4><label>titre :</label><input type='text'/></div></div><a href='#' id='addcours' onclick='ajoutercours(this);return false'>ajouter un cours</a>";
			document.getElementById('chapitres').appendChild(pluus);
		}
	</script>		

</body>
</html>

Ça ne devrait pas t'empêcher de revoir ta façon de faire notamment pour les IDs redondants.
Bonjour,

Merci Zelalsan Smiley smile ,

j'ai encore un problème avec la gestion des variable;
numcours représente le numéro d'un cours, ça marche bien la numérotation des cours mais si je reviens en arrière ( exp : chap 1 ) et je clique sur ajouter un cours le numéro se pointe sur le denier numéro ajouter.
Pour comprendre le problème voici un exemple : http://test20142014.esy.es/test.html



		var global_ID = 2; 
		[#red]var numcours=2;[/#]
		function GetID() { 
			return global_ID++; 
		}
		function ajoutercours(that) {
			var pluus = document.createElement('div');
			pluus.innerHTML = "<div class='cours'><h4>cours "+[#red]numcours[/#]+"</h4><label>titre :</label><input type='text'/></div>";
			that.parentNode.insertBefore(pluus, that);
			[#red]numcours++;[/#]
		}
		function ajouterchapitre() {
			[#red]numcours=2;[/#]
			numChapitre=GetID();
			var pluus = document.createElement('div');
			pluus.className='chap';
			pluus.innerHTML = "<h3>chapitre n° "+numChapitre+"</h3><div id='lescours'><div      class='cours'><h4>cours 1</h4><label>titre :</label><input type='text'/></div></div><a href='#' id='addcours' onclick='ajoutercours(this);return false'>ajouter un cours</a>";
			document.getElementById('chapitres').appendChild(pluus);
		}


Merci d'avance
Sujet clos
Aller à