Скрыть изображение, если его высота больше ширины

Question

У меня много фотографий на моей странице, и я хочу скрыть те , чья высота больше ширины . Я пробовал с этим простым кодом, но он не работает.

HTML

<img src="/path/img_1" class="my_pictures_class">
<img src="/path/img_2" class="my_pictures_class">
<img src="/path/img_3" class="my_pictures_class">
<img src="/path/img_4" class="my_pictures_class">
<img src="/path/img_5" class="my_pictures_class">
...

JS

window.onload = function() {
   var i, img;
   var img = document.getElementsByClassName("my_pictures_class"); 
   for (i = 0; i < img.length; i++) {
     var width = img.clientWidth;
     var height = img.clientHeight;
     if (height>width){
       img[i].style.display = "none";
     }
     else{
        //Nothing
     }
   }
};

Я не могу использовать Jquery.

Спасибо

Answer 1

вы забыли индексы массива изображений

window.onload = function() {
  var i, img;
  var img = document.getElementsByClassName("my_pictures_class");
  for (i = 0; i < img.length; i++) {
    var width = img[i].clientWidth;
    var height = img[i].clientHeight;
    if (height > width) {
      img[i].style.display = "none";
    }
  }
};

Рассмотрим forEach

const imgList = document.getElementsByClassName("my_pictures_class");
Array.from(imgList).forEach(img => {
  const height = img.clientHeight
  const width = img.clientWidth
  if (height > width) {
    img.style.display = "none";
  }
})

Answer 2

Вы пропустили упоминание индекса. Хотя вы можете избежать использования индекса с помощью querySelectorAll() и forEach() следующим образом:

window.onload = function() {
   var imgList = document.querySelectorAll(".my_pictures_class");
   imgList.forEach(function(img){
     var width = img.clientWidth;
     var height = img.clientHeight;
     if (height>width){
       img.style.display = "none";
     }
     else{
        //Nothing
     }
   });
};

<img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/serrano.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="my_pictures_class">