Erreur récuperation par tag

Par Krokilex, il y a 9 ans

Javascript

Bonsoir

je réalise un système qui permet de detecter la hauteur et largeur d'une image, afin d'appliquer une classe en fonction de cela.
Voici ce que j'ai pour l'instant:

container = document.getElementsByClassName('shareImg'); for (var i in container) { img = container[i] picture = img.getElementsByTagName('img') if (picture.offsetHeight < picture.offsetWidth) { img.classList.add('shareImgW') } else if (picture.offsetHeight > picture.offsetWidth) { img.classList.add('shareImgH') } else if (picture.offsetHeight = picture.offsetWidth) { img.classList.add('shareImgS') } }

Le problème vient au début de la boucle, sur le "picture = img.getElementsByTagName('img')", j'obtiens l'erreur: "Uncaught TypeError: img.getElementsByTagName is not a function".
J'ai cherché l'origine du probème mais malheureusmenent je n'ai rien trouvé.

Je vous remercie pour votre aide.

7 réponses

SLK, il y a 9 ans

Ah puré ça fonctionne xD

Merci Huggy !

Bon sang je viens de comprendre pourquoi...
Dans le console.log(container), on peut voir que 'container' est un type HTMLCollection.
Dedans, il a les 2 éléments shareImg qu'on lui a demandé de capturer,
mais il a aussi un élément qui est là par défaut : __proto__
Et notre boucle for (var i in container) passe AUSSI sur cet élément là et fait planter notre script.

C'est un comportement étrange que le système de la boucle passe dans cet élément...
Il y a des cas d'utilisation..?

SLK, il y a 9 ans

Salut,

il comprend donc img.getElementsByTagName comme étant un seul nom,
au lieu de le comprendre comme étant img + . + getElementsByTagName,
et comme il y a des parenthèses au bout, il cherche cette fonction (qui n'existe pas bien sur).

Ça veut dire que img est mal initialisé.

Regarde ce que donne un console.log(img) :

for (var i in container) { img = container[i] console.log(img) ... }

Et montre nous les éléments HTML qui ont la classe shareImg

Krokilex, il y a 9 ans

Lorsque je fais le console.log de img, on m'affiche deux fois cettes div (comme il y en a deux avec cette class):

<div class="shareImg"> <a href="upload/<?=$row['img']?>" download><img class="img-fluid" src='upload/<?=$row['img']?>'></a> </div>

puis 2, puis l'erreur

Krokilex, il y a 9 ans

Pour préciser ce que je souhaite faire, je veux recuperer l'image se trouvant dans la div à l'aide du getElementsByTagName justement.

SLK, il y a 9 ans

Zut j'essaie de comprendre pourquoi ça bug depuis tout à l'heure, je n'y arrive pas :S

On va attendre que quelqu'un d'intelligent réponde...

En attendant,
ça n'a rien à voir mais attention il y a un problème au niveau des quotes pour l'attribut src

Huggy, il y a 9 ans

Essaye en utilisant un for classique

for (let i = 0 ; i < container.length ; i++) { let img = container[i]; console.log(img) let picture = img.getElementsByTagName('img')

il y a aussi une erreur sur le test d'égalité des hauteurs, il faut mettre ==

Krokilex, il y a 9 ans

Effectivement, cela fonctionne bien. Merci à tout les deux pour vos réponses et votre aides :D