Discussion :

[moimp]

Bonjour,
J'ai le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.addEventListener('DOMContentLoaded', function()
{
 
	// display/hide comment
	comment.classList.add('hidden');
 
	for(var el of glasses)
	{
		el.addEventListener('click', function()
		{
			comment.classList.remove('hidden');
			comment.innerHTML = this.dataset.content;
			console.log(comment);
		});
	}
 
	comment.addEventListener('click', function()
	{
		comment.classList.add('hidden');
	});
});

Le fonctionnement défectueux concerne les lignes 11 à 13. Le div 'comment' s'affiche mais reste vierge. Pourtant la console renvoie bien le texte this.dataset.content défini à la ligne précédente. J'ai essayé d'inverser l'ordre des lignes 11 et 12 mais le résultat reste le même.

[ASCIIDEFOND]

Salut moimp,

Et plutôt comme ça à la ligne 12 ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

comment.innerText = this.dataset.content;

[moimp]

Le comportement reste exactement le même, même si innerText semble plus adapté.

[unanonyme]

Bonjour,

Le div 'comment' s'affiche mais reste vierge.

Ceci peut être constaté en naviguant le DOM via l'inspecteur.

this.dataset.content

Quel est le this ici ?

La description du problème est litigieuse.

Il me semble que dès lors que vous aurez construit un exemple minimalement reproductible de votre problème,
vous aurez compris votre problème.

Bonne journée.

[ASCIIDEFOND]

Peut-être un souci avec le code CSS ?

[moimp]

Voici mon CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.comment
{
	position:absolute;
	top:400px;
	left:1000px;
	width:300px;
	height:50px;
	background-color:white;
	border-radius:5px;
}

Dans le DOM, la console renvoie <div class="comment"></div>. C'est aussi ce qui est dans le code html initial.
La console affiche <div class="comment">texte désiré</div> pour la ligne 13. C'est ce qui est souhaité.
Le this vu dans la console renvoie <img src="images/glass.png" data-id="19" data-content="texte désiré" title="Cliquez pour lire les notes.">.
Ce qui m'étonne est que la console affiche le résultat attendu mais que ce résultat n'est pas dans le DOM.

[unanonyme]

Bonjour,

il me semble que le code JS ne manipule pas le même nœud que le code HTML.
Soit vous avez plusieurs nœuds correspondant au sélecteur .comment (document.querySelectorAll devrait en dire plus),
soit vous manipulez une référence qui durant l'exécution du script fut retiré du DOM.

Le nœud n'ayant pas besoin d'appartenir à un arbre DM pour être manipulé.

Je ne connaissais pas cet accesseur dataset, bien vu

https://developer.mozilla.org/en-US/...lement/dataset

Bonne journée.

[moimp]

C'est bon, je viens de trouver. Le fond et la police avait la même couleur. @ASCIIDEFOND: Bien vu, l'histoire du css.