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.

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