LenovoId
@LenovoId
what the fuck ?

Почему js ведёт себя не так так ожидается?

Я хочу в зависимости от соотношения сторон изображения получить в кансоле уведомление
Делаю это так:

let images = document.querySelectorAll("img");

images.forEach(function(url){
    
    let img = new Image();
    img.src = url;
    img.onload = e = console.log(url, ar(img));
    
 
})

function ar(img){
    if(img.width > img.height) {
        return"Альбом"
    }
    
    if(img.width < img.height) {
        return"Портрет"
    }
    
    if(img.width == img.height) {
        return"Квадрат"
    }
}


Разумеется что существует папка img в которой три изображения разных соотношений сторон
1) Вертикальная
2) Альбомная
3) Квадратная

В index.html просто написано

<img src="img/pic1.png" alt="">
 <img src="img/pic2.png" alt="">
 <img src="img/pic3.png" alt="">


5d240343d33d2135490924.png

Но в кансоль выводит вот это :

5d24002c99e0a951737481.png

Почему такой вывод когда ожидается вывести то что в return и не выводится url ?

Решение на скрине


5d24223961c87166834809.png

images.forEach(function(url){
    let img = new Image();
    img.src = url.src;
    img.onload = function() {
        console.log(url.src, ar(this));     
    }
});

  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 4
@tansur
Вечный junior
'use strict';

const imgShape = img => {
  let h = img.getBoundingClientRect().height,
    w = img.getBoundingClientRect().width;

  if (h > w) return img.getAttribute('src') + ' Портрет';
  if (h < w) return img.getAttribute('src') + ' Альбом';
  if (h === w) return img.getAttribute('src') + ' Квадрат';
}
document.querySelectorAll('img').forEach(item => console.log(imgShape(item)));
Ответ написан
@moreleaksILoveMS
Мб все дело в том, что ты не обращаешься к элементу через img.target.width
Добавь везде кроме img.onload и проверь.

Квадрат всегда выводит потому, что он сравнивает undefined с undefined
Ответ написан
Robur
@Robur
Знаю больше чем это необходимо
e = console.log(url, ar(img));


поменяйте на e => console.log(url, ar(img));

ну или поменяйте свои ожидания :)
Ответ написан
@ar2rsoft
PHP-developer
так в url приходит весь тег img, а не только путь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы