Supprimer le JavaScript inline

Version imprimable

Voir 40 message(s) de cette discussion en une page

29/06/2020, 12h34
boteha

Bonjour Javatwister,

Merci de ton code, je le mets sur le codepen ce soir.

Citation:

Envoyé par Nosmoking

ce qui est simple, doit rester simple sauf si tu as des actions chez window.open

window.open c'est un peu comme les vinyles, cela va revenir...
29/06/2020, 22h01
boteha
Bonjour,

Le code ne fonctionne pas sur les deux premiers liens du codepen :
Code:

1 2 3 <p id="trust"><a id="PS" href="#">Site sécurisé</a> <br /> <a id="GB" href="#">Satisfait ou remboursé</a></p>
Je pense que c'est EventListener qui n'est ajouté que pour les images de id="parent" alors qu'il s'agit de liens hors id="parent".
29/06/2020, 23h26
javatwister

C'est formidable: tu as tout compris!
Donc, j'imagine que tu peux rectifier le code tout seul maintenant :roll:
30/06/2020, 11h32
boteha

Bonjour Javatwister,

Je vais essayer ce soir, honnêtement pas sûr d'y arriver car je ne comprends pas tout dans le code.

:roll:

D'après ton html,
- tes liens directs n'ont pas d'id;
- tes liens popup ont un id;
- les liens popup sont dans le conteneur "trust" ou "menuhaut";
- donc, on ne va sélectionner que ces derniers
(Et même Explorer aura de quoi se réjouir d'un code aussi innovant :weird:)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const liens=document.links; for(let i=0;i<liens.length;i++){ if(liens[i].id && (liens[i].parentNode.id=="trust" || liens[i].parentNode.id=="menuhaut")) { liens[i].addEventListener("click",function(e){ const win2=window.open( "nouscab.php#"+this.id, "", "scrollbars=yes,resizable=yes,width=420,height=420" ); e.preventDefault(); }) } }

30/06/2020, 14h07
boteha

Encore MERCI.

J'essaye ce soir.

Je vous tiens informé.

Bonjour,

Dans le codepen, cela marche très bien pour id="trust" mais pas pour id="menuhaut".

Je suppose que le problème est que les liens à pop-up ne sont pas des enfants directs de id="menuhaut", ils sont dans une liste emboitée.
Code:

1 2 3 4 5 6 <ul id="menuhaut"> <li><a href="b.php?a=A1AL&r=pxet&c=CGV">CGV et FAQ</a> <ul> <li><a href="b.php?a=A1AL&r=pxet&c=CGV">Conditions de vente (13 rubriques)</a></li> <li><a id="FP" href="nouscab.php#FP">Quels sont les frais de port ?</a></li> etc..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
const liens=document.links;
for(let i=0;i<liens.length;i++){
	if(liens[i].id) {
		liens[i].addEventListener("click",function(e){
			const win2=window.open(
				"nouscab.php#"+this.id,
				"", 
				"scrollbars=yes,resizable=yes,width=420,height=420"
			);
			e.preventDefault();
		})
	}
}

01/07/2020, 13h12
boteha

Bonjour Javatwister,

Ton code fonctionne très bien sur le codepen.

Je le mets sur mon site de test pendant le week-end.

Je vous tiens informé.

Encore merci.
04/07/2020, 22h10
boteha

Bonjour,

Est_il possible de cibler des classes ?

Le sélecteur css serait :

Code:

li.comp i.trv a

La version réduite doit aussi convenir :

Code:

i.trv a

ou même :

Code:

i.trv > a

Existe-t-il un équivalent en javascript ?

Cela a un rapport avec notre discussion pour nouveau développement.
08/07/2020, 17h26
NoSmoking

Citation:

Est_il possible de cibler des classes ?

Oui, mais il serait temps que tu cherches un peu par toi même et/ou que tu fasses des essais.

Une fois de plus ::dehors:
08/07/2020, 17h31
boteha

Bonjour NoSmoking,

Je comprends ta remarque mais je t'assure que je recherche par moi-même.

Les tutos javascript sont généralement assez incomplets.
08/07/2020, 19h30
NoSmoking

Citation:

Les tutos javascript sont généralement assez incomplets.

Les tutos sont généralement complets mais ne traitent pas tous les sujets et problèmes que l'on peut rencontrer !

Petit coup de pouce : Localisation des éléments DOM avec les sélecteurs (sur MDN). Il faut également suivre les liens.
09/07/2020, 19h20
boteha

Bonjour NoSmoking,

Merci de tes liens, je vais explorer.
12/07/2020, 18h10
boteha

Bonjour,

J'ai bien avancé avec querySelectorAll, merci pour le lien.

Dans le codepen je rencontre un dernier problème.

J'aimerais remplacer les nombreuses déclarations const win=window.open () par une fonction avec plusieurs arguments : le lien, la hauteur, etc.

J'ai créé en fin de code un début de fonction avec un seul argument, l'event pour event.preventDefault();

Cela ne marche pas du tout.

Si vous pouviez me dire où est l'erreur...

Encore merci d'avance.
12/07/2020, 19h03
javatwister

Citation:

les nombreuses déclarations const win=window.open ()

Comment ça "nombreuses" :weird:8O

Il y a encore (et toujours) des malentendus: tu n'as à déclarer la fonction qu'une fois dans la page.

Et j'emploie volontairement le mot fonction car c’en est une (native).
12/07/2020, 19h42
boteha

Bonjour Javarwister,

Désolé de t'énerver mais je ne comprends pas ta réponse.

Bon, si le codepen te semble bien j'enlève le projet de fonction à la fin et laisse le reste en l'état.

Bonjour,

Grâce à votre aide j'ai bien avancé.

Juste une question en passant.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const prom = document.querySelectorAll ('div.prom > a[id]'); if (prom.length > 0) { for (let i = 0; i < prom.length; i++) { prom[i].addEventListener ('click', function (e) { const idImg = prom[i].id.split('X'); const id = idImg[0]; const height = idImg[1]; const win = window.open ('popup.php?nom='+id+'G.jpg', '', 'scrollbars=yes,resizable=yes,width=420,height='+height); e.preventDefault (); } ); } }
Fonctionne sur tous les navigateurs sauf IE.

Voyez-vous un moyen de le rendre IE friendly ?

Je pense que c'est cette ligne qui pose problème : prom[i].addEventListener

20/07/2020, 11h41
NoSmoking

Citation:

Fonctionne sur tous les navigateurs sauf IE.

effectivement IE « boggue » avec la déclaration de variable de boucle via le mot clé let : voir cette réponse.

Citation:

Je pense que c'est cette ligne qui pose problème : prom[i].addEventListener

Pas exactement, la question que tu peux également te poser est ai-je besoin de la variable i dans ma la boucle ?

Dans son post #48 javatwister t'a donné la solution, il suffit de lire les réponses !
20/07/2020, 12h21
boteha

Bonjour NoSmoking,

Citation:

Envoyé par NoSmoking

la question que tu peux également te poser est ai-je besoin de la variable i dans ma boucle ?

Si tu poses la question c'est que la réponse est non.

Avec document.querySelectorAll je récupère un tableau.

Il me semble que FOREACH n'est pas compris par IE, donc j'emploie FOR.

Je vais voir la doc sur FOR.

Je vous tiens informés.
20/07/2020, 18h56
NoSmoking

J'ai corrigé, il fallait lire la et non ma boucle ce qui ne change rien au fait que tu lises les réponses en diagonale.

Citation:

Pas exactement, la question que tu peux également te poser est ai-je besoin de la variable i dans ma la boucle ?

Je ne remets pas en cause l'utilisation de la boucle for mais l'utilisation du i dans celle-ci, ce n'est pas la même chose !

Reprends donc la réponse faite par javatwister comme déjà signalé.
20/07/2020, 20h03
boteha

Merci de ton suivi.

Je vais revenir là-dessus à tête reposée.
21/07/2020, 14h40
NoSmoking
Citation:

Merci de ton suivi.

pour suivre quelque chose il faut que celle-ci avance et j'ai plutôt l'impression que tu es attentiste !!!

Remarques
Code:

1 2 3 if (prom.length > 0) { for (let i = 0; i < prom.length; i++)
a quoi sert le ligne if (prom.length > 0) ?

Un indice chez vous :
Code:

1 2 3 prom[i].addEventListener('click', function (e) { console.log(e); // regarde ce que vaut e.target console.log(this); // regarde ce que vaut this
et tu verras que tu n'as pas besoin du i dans ta fonction, enfin je pense que tu devrais le voir !
21/07/2020, 21h58
boteha

Bonjour NoSmoking,

Remplacer prom[i] par this et cela marche sur IE.

Autrement, merci de ton indulgence, si je je pose des questions c'est car je ne sais pas et ne trouve pas la solution.
25/07/2020, 20h20
boteha
Citation:

Envoyé par NoSmoking

a quoi sert le ligne if (prom.length > 0) ?

div.prom contient trois liens sélectionnés parmi une trentaine de façon aléatoire.

Seuls les liens avec id ouvrent un pop-up.

Il est possible qu'aucun lien parmi les trois n'ait d'id, dans ce cas il n'est pas nécessaire de poursuivre le script.

D'où cette condition :
Code:

1 2 3 const prom = document.querySelectorAll ('div.prom > a[id]'); if (prom.length > 0)
26/07/2020, 09h38
NoSmoking

Je pense que les bases te manquent cruellement,
Dans l'expression : for (let i = 0; i < prom.length; i++) que se passe t-il si prom.length = 0 ... cela se traduit par i < 0 mais comme i = 0 au départ de la boucle ... tout simplement on entre pas dans la boucle ;)
26/07/2020, 12h07
boteha

Bonjour NoSmoking,

Encore merci de ton aide mais là tu me sous-estimes.

Code:

if (prom.length > 0)

est inutile, je suis d'accord, mais cela rend le code plus clair en montrant qu'il est possible de ne recevoir aucun résultat.

Par ailleurs je ne pense pas que cela ralentisse le script.
26/07/2020, 17h44
NoSmoking

Citation:

...mais cela rend le code plus clair...

Là tu me bluffes, il n'est qu'à regarder le code que tu nous à fourni au post #58 !
26/07/2020, 21h52
boteha

Bonjour NoSmoking,

Merci de ton aide, que puis-je dire de plus ?
27/07/2020, 11h42
NoSmoking

Citation:

que puis-je dire de plus ?

Rien, mettre enfin cette discussion en résolue.
27/07/2020, 12h22
boteha

J'ai coché Résolu.

Encore merci.

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 17h28.