Erreur récuperation par tag

Krokilex
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

Huggy
Réponse acceptée

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 ==

SLK

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
Auteur

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
Auteur

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

SLK

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

SLK

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..?

Krokilex
Auteur

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