Syntaxe getAttribute, où est l'erreur

Version imprimable

Bonjour,

J'ai un carrousel d'images dont la structure est la suivante.

Code:

1
2
3
4
5
6
<figure role="main">
<button type="button"><img src="im/pr/1550G.avif" alt="vignette 1" width="100" height="77" loading="lazy" decoding="async" /></button>
<img src="im/pr/1550G.avif" alt="mon beau produit tout neuf" width="400" height="305" fetchpriority="high" decoding="async" />
<button type="button"><img src="im/mu/1550-1G.webp" alt="vignette 2" width="100" height="82" loading="lazy" decoding="async" /></button>
<img src="im/mu/1550-1G.webp" alt="imafge 2" width="400" height="328" loading="lazy" decoding="async" />
</figure>

Je dois savoir quel bouton a le focus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
// Focus à l'ouverture de la page
 
document.querySelector('button:has(> img[src$="1550-6G.webp"])').focus ();
 
const imgs = document.querySelectorAll("figure > button");
const imgFocused = [];
imgFocused[0] = "im/mu/1550-1G.webp"
 
// Cherche le Focus
 
for (button of imgs) {
button.addEventListener("blur", function () {
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
button.addEventListener("mousedown", function () {
imgFocused[0] = document.querySelector(figure > this > img).getAttribute("src");
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
}
</script>

Cela ne fonctionne pas.

Voyez-vous où est l'erreur dans le code ?

J'ai un gros doute sur :

Code:

imgFocused[0] = document.querySelector(figure > this > img).getAttribute("src");

Si vous pouvez m'aider merci d'avance.

Bonjour, querySelector() attend un sélecteur CSS pas une expression JS.
https://developer.mozilla.org/fr/doc.../querySelector

Tu as la possibilité de récupérer l'évent dans les paramètres de la fonction et dedans il y a plein de chose intéressante, je te laisse observer le résultat du console.log().
Pour connaitre le bouton cliquer, tu disposes de this dans ta fonction, avec firstElementChild qui pourrait t'être utile.
Code:

1 2 3 4 5 6 7 button.addEventListener("mousedown", function (e) { console.log(e.srcElement.src); console.log(this); // imgFocused[0] = document.querySelector('figure > this > img').getAttribute("src"); document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus(); });

Bonjour casperweb,

Merci de ton suivi.

Il existe une solution, dans la boucle je mets :

Code:

imgFocused[0] = this.querySelector('img').getAttribute('src');

Le script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script> document.querySelector('button:has(> img[src$="1721-1G.webp"])').focus (); const imgs = document.querySelectorAll("figure > button"); const imgFocused = []; imgFocused[0] = "im/mu/1721-1G.webp" for (but of imgs) { but.addEventListener("blur", function () { document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus(); }); but.addEventListener("mousedown", function () { imgFocused[0] = this.querySelector('img').getAttribute('src'); document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus(); }); } </script>
J'ai un dernier problème étrange.

Le carrousel ouvert dans une pop-up comprend un bouton pour fermer la pop-up.
Code:

1 2 3 4 5 ... <button type="button"><img src="im/mu/1550-6G.webp" alt="" width="100" height="47" loading="lazy" decoding="async" /></button> <img src="im/mu/1550-6G.webp" alt="" width="400" height="185" loading="lazy" decoding="async" /> <p><span>Agrandir cette fenêtre afin de mieux voir les détails.</span><button type="button">Fermer</button></p> </figure>
Si le bouton Fermer est sous la ligne de flottaison, le survol sur ce bouton provoque un retour vers le haut de page exactement comme si je cliquais vers un lien qui renvoie vers le haut de page.

Je ne vois pas où est l'erreur dans le javascript ci-dessus.

Le script pour Fermer est externe :
Code:

1 2 3 4 5 6 7 8 const ferme = document.querySelector ('p > button, footer > button'); ferme.addEventListener ('mousedown', function () { window.close (); window.opener.focus (); } );
Voyez-vous où est l'erreur qui provoque ce comportement étrange au survol du bouton Fermer ?

29/07/2026, 18h57
casperweb

Bonjour,

Citation:

Voyez-vous où est l'erreur qui provoque ce comportement étrange au survol du bouton Fermer ?

Non je ne vois pas la raison de ce comportement. Peut être en analysant le code complet de la page et son comportement.
Désolé.
29/07/2026, 20h47
boteha

Bonjour casperweb,

Encore merci de ton suivi.

J'ai réglé ce bug sans trop savoir d'où il venait.

Dans le JS comme dans le CSS j'ai banni le sélecteur button pour le remplacer par plus précis figure > button (les vignettes du carrousel) ou p > button (le bouton Fermer).

Par prudence j'attends un peu avant de cocher Résolu mais cela sent bon.