Erreur récuperation par tag

Ce sujet est résolu
47534
,

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éponse

44835
,

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

37685
, Il a répondu à ma question !

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

47534
, Il a répondu à ma question !

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

47534
, Il a répondu à ma question !

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

37685
, Il a répondu à ma question !

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

37685
, Il a répondu à ma question !

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

47534
, Il a répondu à ma question !

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