Access variable from function

Question

I have a function that has a values inserted into variables in another function.

Initialise:

When the window resizes, it fires the resizeImage() function.

$(window).resize(function () {
    resizeImage();
});

Resize Function:

This function checks every element with the image-resize class and add readjust the SRC for the image by changing the width value (dynamic from scene7).

The problem is that element.attr('src', newSrc); newSrc doesn't exist as its stored in sizingMethod().

Is there anyway of grabbing the variable from sizingMethod() function and placing it within the element.attr('src', newSrc);.

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc;

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '1824');
        }

        element.attr('src', newSrc);
    });
};

Sizing Function:

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewSrc, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    sNewSrc = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
}

Answer 1

When you use a primitive, what you send is the value not the reference, so the sNewSrc != newSrc, so any changes you do to sNewSrc that variable will not change newSrc.

You can fix your code using:

---

return: returning the value in the function sizingMethod:

if ($(window).width() > 1824) {
    newSrc = sizingMethod(src, regx, currentWidth, newWidth, '2000');
} else if ($(window).width() <= 1824 && $(window).width() > 1366) {
    newSrc = sizingMethod(src, regx, currentWidth, newWidth, '1824');
}

Sizing Function:

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    var sNewSrc = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
    return sNewSrc;
}

---

closure: if declare sizingMethod inside the anonymous function you have access to the variable newSrc and other variables as well.

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc;

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod('2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod('1824');
        }

        element.attr('src', newSrc);

        function sizingMethod(sNewWidth){
            currentWidth = src.match(regx);
            var sNewW = 'wid=' + sNewWidth;
            newSrc = sSrc.replace(currentWidth, sNewW);
            textWidth = sNewW.replace('wid=', '');
            $(".dsply-screen-size").text($(window).width());
            $(".dsply-image-size").text(textWidth);
        }
    });
};

---

object: if you use an object/array instead of a primitive as an argument

function resizeImage() {
    $('.image-resize').each(function () {

        var element = $(this), src = $(this).attr('src'), regx = /wid=\d+(\.\d)*/g, currentWidth, newWidth, newSrc = {};

        var attrElement = $(this), attrSrc = $(this).attr('data-zoom-image'), attrRegex = /wid=\d+(\.\d)*/g, attrCurrentWidth, attrNewWidth, attrNewSrc;

        if ($(window).width() > 1824) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '2000');
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
            sizingMethod(src, regx, currentWidth, newWidth, newSrc, '1824');
        }

        element.attr('src', newSrc.src);
    });
};

Sizing Function:

function sizingMethod(sSrc, sRegex, sCurrentW, sNewW, sNewSrc, sNewWidth){
    sCurrentW = sSrc.match(sRegex);
    sNewW = 'wid=' + sNewWidth;
    sNewSrc.src = sSrc.replace(sCurrentW, sNewW);
    textWidth = sNewW.replace('wid=', '');
    $(".dsply-screen-size").text($(window).width());
    $(".dsply-image-size").text(textWidth);
}