11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Ce script pour fermer un pop-up ouvert avec window.open () ne fonctionne pas.

<p>Un</p>
<p><a href="#">Fermer</a></p>
<p>Deux</p>
<p><a href="#">Fermer</a></p>


const ferme = document.querySelectorAll('p a,');
for (let i = 0; i < ferme.length; i++)
{
ferme[i].addEventListener ('click', function ()
{
window.close ();
event.preventDefault();
}
);
}


Où voyez-vous l'erreur ?

Merci d'avance.
Bonjour,

Merci de ton suivi.

J'ai fait tes corrections et cela marche.

En plus, j'avais oublié d'appeler le script dans la page html...

Accessoirement je passe le lien dans body, tout à la fin de body, donc juste au dessus de </body>

<script src="dp/pop_ferme.js"></script>


C'est la bonne place, non ?

const ferme = document.querySelectorAll('p.lome a:last-child, p.lom a:last-child, div.sep a');
for (let i = 0; i < ferme.length; i++)
{
ferme[i].addEventListener ('click', function (e)
{
window.close ();
e.preventDefault();
}
);
}


PS : il y a plusieurs liens Fermer car le document comprend de nombreuses rubriques, un peu comme une FAQ.
Le bouton Fermer est répété à la fin de chaque rubrique.
Je pourrais mettre un seul lien Fermer en position : fixed ou avec une Flexbox mais c'est une conception ancienne qui a son charme.
Modifié par boteha_2 (13 Jul 2020 - 19:27)
Dev-Web-06 a écrit :
Oui avant </body> c'est la bonne place pour charger ton script.


Merci.

Je pense que je vais remplacer mes <a href="#"> par des balises <button> plus sémantiques.

Ensuite je coche Résolu.
Modifié par boteha_2 (14 Jul 2020 - 11:40)
Bonjour,

J'ai remplacé les <a href="#">Fermer</a> par <button type="button">Fermer</button>

Pour donner à button l'apparence d'un lien :

button {background: none; border: 0; padding: 0; margin: 0; font-size: 1em; text-decoration: underline; cursor: pointer; color: #votre-choix}

button:hover {votre-choix}


Le javascript devient encore plus simple.

const ferme = document.querySelectorAll('button');
for (let i = 0; i < ferme.length; i++)
{
ferme[i].addEventListener ('click', function ()
{
window.close ();
}
);
}


Je n'ai plus besoin de la méthode preventdefault () car il n'y a pas de comportement par défaut.

Merci de ton aide, comme je suis prudent j'attends un peu avant de cocher Résolu.