I am having a situation where I can only log window.innerWidth as the window size width changes inside the scope of the written function from where it is returned, but returning the value and logging it outside of that scope isn't working as it only logs the initial value of window.innerWidth but doesn't keep logging the value as it changes. I am unsure how to do this correctly. I tested these two approaches in my project and on codepen, neither will allow logging window.innerWidth from the return value of the function in real time.

    const logWindow_width = window.onresize = function () {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    window.addEventListener('resize', logWindowWidth);
    function logWindowWidth() {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    console.log(logWindow_width());
    console.log(logWindowWidth());

I am having a situation where I can only log window.innerWidth as the window size width changes inside the scope of the written function from where it is returned, but returning the value and logging it outside of that scope isn't working as it only logs the initial value of window.innerWidth but doesn't keep logging the value as it changes. I am unsure how to do this correctly. I tested these two approaches in my project and on codepen, neither will allow logging window.innerWidth from the return value of the function in real time.

    const logWindow_width = window.onresize = function () {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    window.addEventListener('resize', logWindowWidth);
    function logWindowWidth() {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    console.log(logWindow_width());
    console.log(logWindowWidth());

• javascript
• resize

Share Improve this question Follow edited Mar 8 at 2:49 Matthew Abebe asked Mar 8 at 2:45 Matthew AbebeMatthew Abebe 111 bronze badge 2

• What do you want to do with the window.innerWidth value? You should read it when you need it and it will give you the current width. If you need to read it as the window is resized then put the code you need it for inside the onresize callback. – stuartb Commented Mar 8 at 3:11
• I am separating out some of the functions from my pageViews function to a condition that runs on the resize event which is allowing me to get the result I need. Thanks. – – Matthew Abebe Commented Mar 8 at 8:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Returning a value from the event handler (like in your example with window.onresize) does not give you the effect you want. This is because the resize event is asynchronous—it triggers after the window size changes, and you cannot simply get the value in real time when you call the function, because it only happens once, while the event continues updating the width.

The simplest thing you can do is create a "flag variable" where you store the new value every time the screen size changes, and then retrieve the value from this "flag variable".

// Initial window width value
let windowWidth = window.innerWidth;

// Resize event handler
window.addEventListener('resize', function() {
    // Update window width on every resize
    windowWidth = window.innerWidth;
});

// Function to get the current window width
function getWindowWidth() {
    // Return the latest value
    return windowWidth;
}

console.log(getWindowWidth());