[webpack] problem z deklaracją zmiennej

Question

Witam, to znowu ja.

Tym razem próbowałem projekt galerii zdjęć wdrożyć w życie, korzystam z webpacka i gdy poustawiałem wszystko pod projekt jedna z funkcji w galerii nie działa poprawnie.

Dostaje taki błąd

Podrzucam link do repozytorium, żeby łatwiej można było zdebugować błąd.

Ja sam nie mam pojęcia jak nawet mogę wygooglować ten błąd.

https://github.com/42savage/amgar-files

Answer 1

Na oko:

https://github.com/42savage/amgar-files/blob/master/src/imageGallery.js#L16

style = img.currentStyle || window.getComputedStyle(img, false),

Nie widzę nigdzie deklaracji tej zmiennej.

Comments

Póki co zmieniłem deklarowanie tych zmiennych i dodałem przed var

PRZED:

    function getSource(element){
        let img = element;
        style = img.currentStyle || window.getComputedStyle(img, false),
        backgroundImage = style.backgroundImage.slice(34, -1).replace(/"/g, "");
        console.log(backgroundImage)
    }

 

PO:

    function getSource(element){
        let img = element;
        var style = img.currentStyle || window.getComputedStyle(img, false);
        var backgroundImage = style.backgroundImage.slice(34, -1).replace(/"/g, "");
        console.log(backgroundImage)
    }

w konsoli dostaje ścieżke do zdjęcia,

zaraz niżej pojawia się  komunikat

Uncaught ReferenceError: backgroundImage is not defined

to znaczy, że dalej potrzebny jest return?

---

Zmienna backgroundImage jest używana w funkcji createImage. Albo więc przekaż ją tam (czyli musisz zwrócić backgroundImage z funkcji getSource), albo zadeklaruj tą zmienną na górze skryptu (o czym wspomniałem w poprzednim komentarzu).

---

Poradziłem sobie w taki sposób, że zrobiłem 

takie coś

var storage = {}

do storage z funkcji getSrc wrzucam zmienna backgroundImage

        storage.backgroundImage = backgroundImage;

a w funkcji createContainer

        image.style.background = `url('images/${storage.backgroundImage}')`;

musiaem dodać "images/"

i teraz działa.

a z returnem nie wiem jak miałbym to zrobić, możecie mi to jakoś opisać, bo nie do końca ogarniam?

Miałbym po prostu napisać return nazwaZmiennej?

a potem jak miałbym się do tej zmiennej odwołać?

---

a z returnem nie wiem jak miałbym to zrobić, możecie mi to jakoś opisać, bo nie do końca ogarniam?

function init(element){
    var backgroundImageValue = getSource(element);
    createImageContainer(element, backgroundImageValue);
}

function getSource(element){
    let img = element;
    var style = img.currentStyle || window.getComputedStyle(img, false),
    var backgroundImage = style.backgroundImage.slice(37, -1).replace(/"/g, ""); //"
    console.log(backgroundImage);

    return backgroundImage;
}

function createImageContainer(/* ??? */ element, backgroundImageParam){
    var imageContainer = document.createElement('div');
    imageContainer.className = "imageContainer";
    document.body.appendChild(imageContainer);
    createImage(imageContainer, backgroundImageParam);
    removeContainer(imageContainer);
}

function createImage(imageContainer, backgroundImage){
    /* kod w środku bez zmian */
}

P.S. Dlaczego funkcję createImageContainer wołasz z parametrem element, ale już w funkcji nie używasz tego jako argument (wpisałem tam znaki zapytania jako komentarz)?

---

Szczerze mówiąc nie wiem, głupie niedopatrzenie.