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));     
    }
});

  • Вопрос задан
  • 96 просмотров
Пригласить эксперта
Ответы на вопрос 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, а не только путь
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 30 000 до 65 000 руб.
от 60 000 до 90 000 руб.
BSSL Москва
от 50 000 до 150 000 руб.