Insérer des balises sur la page html

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

j'essaie d'ajouter du contenu html à ma page grâce à une fonction js, seulement, le contenu ne s'ajoute pas à la page, et j'ai une erreur qui s'affiche dans la console:

Pièce jointe 448800

Les fonctions js (la première gère l'ajout du contenu, la seconde est une fonction appelé lors du clique sur un contenu ajouté):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
function AjoutCourse(newCourse){
	console.log(newCourse);
 
	var course = document.createElement('div');
		course.className = "lc-course";
 
		var etat = document.createElement('div');
			etat.className = "lc-course-etat";
			var input1 = document.createElement('input');
				input1.type = "checkbox";
				input1.value = newCourse.numCourse;
		etat.appendChild(input1);
	course.appendChild(etat);
 
		var courseNom = document.createElement('div');
			courseNom.className = "lc-course-nom";
			var form2 = document.createElement('form');
				form2.method = "POST";
				form2.action = "index.php?action=courseAfficher";
				form2.addEventListener('click', CourseAfficher(this)); //L251
				var input2 = document.createElement('input');
					input2.type = "hidden";
					input2.name = "numCourse";
					input2.value = newCourse.numCourse;
			form2.appendChild(input2);
				var nom = document.createTextNode(newCourse.nomCourse);
			form2.appendChild(nom);
		courseNom.appendChild(form2);
	course.appendChild(courseNom);
 
		var courseAvance = document.createElement('div');
			courseAvance.className = "lc-course-avance";
			var avance = document.createTextNode("0/0");
		courseAvance.appendChild(avance);
	course.appendChild(courseAvance);
 
		var courseMenu = document.createElement('div');
			courseMenu.className = "lc-course-menu";
			var span = document.createElement("span");
				span.className = "glyphicon glyphicon-option-vertical";
		courseMenu.appendChild(span);
	course.appendChild(courseMenu);
 
	document.body.appendChild(course);
} 
 
function CourseAfficher(form){
	form.submit(); //L279
}

Voici la construction de la page au cas où:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="lc-course">
	<div class="lc-course-etat">
		<input type="checkbox" value="<?php echo $c->getNumCourse();?>">
	</div>
	<div class="lc-course-nom">
		<form method="POST" action="index.php?action=courseAfficher" onclick="CourseAfficher(this)">
			<input type="hidden" name="numCourse" value="<?php echo $c->getNumCourse();?>">
			<?php echo $c->getNomCourse(); ?>
		</form>
	</div>
	<div class="lc-course-avance">
		<?php echo $c->getAvanceCourse()."/".count($c->getArticleCourse());?>
	</div>
	<div class="lc-course-menu">
		<span class="glyphicon glyphicon-option-vertical"></span>
	</div>
</div>

La fonction 'CourseAfficher' fonctionne pour le contenu déjà présent sur la page html lors du chargement.

Merci d'avance de votre aide.
Cordialement,
Skunka.

Code:

<form method="POST" action="index.php?action=courseAfficher" onclick="CourseAfficher(this)">

Ici, this désigne l'élément form.

Code:

form2.addEventListener('click', CourseAfficher(this)); //L251

Mais dans ce contexte, this ne désigne pas l'élément form2 mais l'objet Window.

La meilleur solution est à mon avis de virer l'attribut onclick qui est désuet, et de mettre le gestionnaire d'événement dans ton javascript:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <form method="POST" action="index.php?action=courseAfficher" name="toto">  <script> document.forms['toto'].addEventListener('click', CourseAfficher); //... function AjoutCourse(newCourse) { //... form2.addEventListener('click', CourseAfficher); //... } function CourseAfficher(evt) { evt.target.submit(); } </script>
Au passage, tu te donnes bien du mal avec ta fonction AjoutCourse à recréer pratiquement à l'identique un nœud déjà présent dans ton html: tu pourrais tout simplement le cloner et juste changer les quelques attributs qu'il n'a pas en commun avec l'original.

1 pièce(s) jointe(s)

Bonsoir et merci pour ta réponse,

J'ai essayé de suivre tout ça mais j'ai encore deux erreurs que je n'arrive pas à résoudre:
Pièce jointe 449574

J'ai commenté la ligne 15 concernée:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function AjoutCourse(num,nom){
	console.log(num + " " + nom);
 
	var courseClone = document.createElement('div');
	courseClone.class = "lc-course";
 
	var courseEtat = document.getElementById('lc-course-etat');
	var courseEtatClone = courseEtat.cloneNode(true);
	courseEtatClone.firstChild.value = num;
	courseClone.appendChild(courseEtatClone);
 
	var courseNom = document.getElementById('lc-course-nom');
	var courseNomClone = courseNom.cloneNode(true);
	console.log(courseNomClone);
	courseNomClone.firstChild.firstChild.value = num; // !! ERREUR !! 
	courseNomClone.firstChild.lastChild.value = nom;
	courseClone.appendChild(courseNomClone);
 
	var courseAvance = document.getElementById('lc-course-avance');
	var courseAvanceClone = courseAvance.cloneNode(true);
	courseAvanceClone.firstChild.contentText = "0/0";
	courseClone.appendChild(courseAvanceClone);
 
	var courseMenu = document.getElementByClassName('lc-course-menu');
	var courseMenuClone = courseMenu.cloneNide(true);
	courseClone.appendChild(courseMenuClone);
 
	document.body.appendChild(courseClone);
 
}

La <div> concernée:

Code:

1
2
3
4
5
6
<div class="lc-course-nom" id="lc-course-nom">
	<form method="POST" name="formCourse" action="index.php?action=courseAfficher">
		<input type="hidden" name="numCourse" value="<?php echo $c->getNumCourse();?>">
		<p><h3><?php echo $c->getNomCourse(); ?></h3></p>
	</form>
</div>

La seconde, c'est que l'affichage d'une course ne se fait pas, une erreur m'est retourné: form.submit() is not a function.

Code:

1
2
3
4
 
function CourseAfficher(form){
	form.submit();
}

Appelé grâce à:

Code:

document.forms['formCourse'].addEventListener('click', Afficher);

Edit: Je viens de remarquer que l'eventListener ne s'applique qu'au formulaire de la première <div class="lc-course"> et non à tous.

14/02/2019, 20h55
CosmoKnacki

Je n'ai pas tout ton code html produit devant les yeux, mais je pense que tu devrais éviter de placer des attributs id dans les portions de code html que tu comptes cloner (une id étant par nature unique). Tu dois donc trouver un autre moyen d'atteindre les nœuds que tu souhaites sans utiliser la méthode getElementById (tu as l'embarras du choix: querySelector, getElementsByClassName, ...).
20/02/2019, 17h30
Skunka

Bonjour et désolé d'avoir mis autant de temps à répondre.

J'ai finis par réussir ce que je voulais, grâce à ton aide, alors merci!

Sujet résolu.