Discussion :

[clavier12AZQSWX]

bonjour,

en javascript pur (sans jquery), je cherche à ajouter un lien à une image juste en connaissant sa valeur source (attribut src).
J'ai tenté qqchose mais çe ne fonctionne pas et ne retourne aucune erreur, donc je comprends pas d'où provient le souci.

mon scénario c'est :
1 - lister les éléments avec une requête sur l'attribut SRC
2 - je garde que le premier élément de la liste des résultats (j'ai mis un [0]) en queue du selector .
3 - je modifie le inner html en encapsulant le lien

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>
<img src="/media/toto.jpg" alt="une image sans lien">
</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
     alert('debut script');
 
    var parentEl=document.querySelectorAll("img[src='/media/toto.jpg']")[0];
var imgEl = parentEl.innerHtml;
parentEl.innerHtml = '<a href="test.html">' + imgEl + '</a>';
    alert('fin script');

voyez-vous le souci ?
J'ai mis des balises alertes pour être sûr que ça pas d'erreur et que le script commence et se termine sans erreur. Pourtant après, le lien n'existe pas...

[ProgElecT]

Salut

Faute d'inattention je pense
parentEl.innerHtml
parentEl.innerHTML, HTML en majuscule

[clavier12AZQSWX]

merci pour la coquille mais étrangement ça n'a pas résolu. d'ailleurs, avec et sans majuscule ça ne produit aucune erreur !
par contre en affichant ma variable avec
console.log(imgEl);
je m’aperçois qu'elle est vide donc var imgEl = parentEl.innerHTML; ne reçoit rien du sélector.

je me demande si ça vient pas du chemin src en mode relatif (affiché par gg chrome), je vais mettre l'url complète dans le src selector pour tester....
j'espère ne pas avoir perdu encore du temps à cause d'une fourberie de Chrome....

[clavier12AZQSWX]

bon, j'ai testé ma source relatif/absolu. ça ne vient pas de là.

par contre ya un truc que je ne comprends pas.

quand je regarde console.log(parentEl); ça renvoie bien un objet et pourtant la console F12 affiche le code html comme si c'était une variable string
quand je regarde console.log(typeof(parentEl)); ça renvoie OBJECT et pas une string

par contre console.log(imgEl); ne renvoie rien ! il doit donc y avoir une erreur dans ma ligne

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var imgEl = parentEl.innerHTML;

revoici mon code en bonne casse au cas où...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script>
console.log('debut script'); 
    var parentEl=document.querySelectorAll("img[src='/media/toto.jpg']")[0];
    console.log(parentEl); 
    console.log(typeof(parentEl)); 
var imgEl = parentEl.innerHTML;
    console.log(imgEl);
parentEl.innerHTML = '<a href="test.html">' + imgEl + '</a>';
    console.log('fin script');
</script>

[SpaceFrog]

teste le src de l'image dans un console.log ...

[Doksuri]

je ne sais pas si c'est ca que tu veux faire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="https://placekitten.com/99/99" /><br />
<img src="https://placekitten.com/100/100" /><br />
<img src="https://placekitten.com/101/101" /><br />

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const url = 'https://placekitten.com/100/100';
const img = document.querySelector(`img[src="${url}"]`);
const a = document.createElement('a');
a.href = url;
img.after(a);
a.append(img);

=> la 2eme image devient cliquable

[javatwister]

Oui, d'accord avec Doksuri;

Le problème est que tu appelles la propriété innerHTML sur un objet html qui n'a pas d'enfants...; imgEl renvoie donc une chaîne vide.
Doksuri te propose d'insérer un noeud "a frère de img dans ta balise div et d'y transférer l'image.

[clavier12AZQSWX]

c'est étrange.
je viens d'essayer la solution de Doksuri sur un fichier vide local test.html et ça marche très bien.

Mais une fois adaptée au site web, j'ai une erreur sur la ligne de code : img.after(a); et la console crie :

Uncaught TypeError: Cannot read properties of null (reading 'after')
at ligne XXX

Cela doit venir du cms (joomla) qui interfère... je vais voir si je peux placer mon script en queue de page plutôt qu'inline dans le contenu d'un article.

Je mets le sujet en RÉSOLU vu que ça marche en test local.