Discussion :

[moimp]

Bonjour,

J'ai créé un code pour transformer le texte d'un élément label en lien lorsque le champ est rempli.
Ce code fonctionne en partie mais pas sur l'événement 'DOMContentLoaded'. Je voudrais comprendre pourquoi.

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
22
23
24
25
26
27
28
29
30
31
32
"use strict";
 
(function()
{
 
	const mails	= document.querySelectorAll('.mail')
		, urls	= document.querySelectorAll('.url')
		;
 
	function doLinkForMail(id, string)
	{
		let label = document.querySelector("label[for='"+id+"']")
		;
		if (string)
		{
			string = string.toLowerCase();
			if (string.indexOf('string:') == -1) { string = 'mailto:'+string; }
			label.innerHTML = "<a href='"+string+"'>"+label.innerHTML+"</a>";
		}
	}
 
	for(let i=0, max=mails.length; i<max; i++)
	{
		mails[i].addEventListener('blur', function(e)
		{
			doLinkForMail(this.id, this.value);
		},false);
		window.addEventListener('DOMContentLoaded', function(e)
		{
			doLinkForMail(this.id, this.value);
		}
	}

[danielhagnoul]

L'événement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.

Il ne doit pas être dans une boucle for !
Il ne fonctionne pas dans ce contexte.
Il ne doit y avoir qu'un seul gestionnaire sur cet événement, qui est appelé lors de la construction de la page web.

Exemple :

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
22
23
24
25
26
27
28
29
30
window.document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
    moment.locale('fr');
    console.log(`DOM ready : ${new kDvjhDate()}`);
 
    // début code du test
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});
 
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

[moimp]

Merci