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]
    if (img.offsetHeight < img.offsetWidth) {
      picture = img.getElementsByTagName('img')
      picture.classList.add('shareImgW')
    }
    else if (img.offsetHeight > img.offsetWidth) {
      picture = img.getElementsByTagName('img')
      picture.classList.add('shareImgH')
    }
    else if (img.offsetHeight = img.offsetWidth) {
      picture = img.getElementsByTagName('img')
      picture.classList.add('shareImgS')
    }
  }

Tout fonctionne correctement jusqu'à ce que j'arrive au classList.add.
J'ai une image dont la largeur est superieur à la hauteur, je rentre donc dans ma première condition.
Cependant, au niveau du picture.classList.add('shareImgW'), j'obtiens l'erreur : "Uncaught TypeError: Cannot read property 'add' of undefined".
J'ai beau chercher, je ne comprend pas l'origine de mon problème.

Je vous remercie de votre aide.

2 réponses


keulu
Réponse acceptée

normal.

document.getElementsByTagName("img") te renvoit un tableau de toutes les images trouvées. meme si t'en a qu'une seule ou aucune. tu doit ensuite ajouter ton add sur un element et non pas le tableau. il te manque un index de tableau

document.getElementsByTagName("img")[0].classList.add("anotherclass")

pour mieux comprendre,

picture = img.getElementsByTagName('img')
devrait s'appeler
pictures = img.getElementsByTagName('img')

Krokilex
Auteur

d'accord je comprend mieux. Je pensais que comme il n'y avait uniquement une seul img, par defaut cela me donnerait le meme resultat qu'un getElement.
Merci beaucoup pour l'aide, cela fonctionne correctement maintenant :D