Fail on Changing the window.onresize after the page has been loaded

Question

I have a function name onresizeWindow() and onresizeWindow2() that i put in the head of my page to change the height of a div .

function onResizeWindow() {
        if (window.innerHeight && document.getElementById("divListItem"))
            document.getElementById("divListItem").style.height = window.innerHeight - 135;
        else if (document.getElementById("divListItem"))
            document.getElementById("divListItem").style.height = document.body.clientHeight - 135;
    }
function onResizeWindow2() {
        if (window.innerHeight && document.getElementById("divListItem"))
            document.getElementById("divListItem").style.height = window.innerHeight - 275;
        else if (document.getElementById("divListItem"))
            document.getElementById("divListItem").style.height = document.body.clientHeight - 275;
        }
}

Then in the footer of my page I put this

window.onresize = onResizeWindow;
onResizeWindow();

When user click a button, i put this code

function showDiv(){
        var tr = document.getElementById('tdSearch');               
        if (tr.style.display =="table-row"){
            tr.style.display = "none"; 
            window.onresize= null;
            window.onresize= onResizeWindow();
            onResizeWindow();
        }else{
            tr.style.display = "table-row";
            window.onresize= null;
            window.onresize= onResizeWindow2();
            onResizeWindow2();
        }
}

The problem is after clicking the button, page onresize function of the page doesn't work anymore. How to fix it?

Answer 1

Just like your original assignment, you shouldn't use (). Use:

window.onresize = onResizeWindow;
// and
window.onresize = onResizeWindow2;

Adding the () immediately calls the functions and assigns their return value to the onresize property. These functions return nothing, so undefined is the returned value, meaning nothing runs when the window is resized.

Answer 2

When you do window.onresize= onResizeWindow();, you're effectively setting window.onresize to undefined, since you are running onResizeWindow and setting onresize to the return value.

Just remove the parentheses.

function showDiv() {
        var tr = document.getElementById('tdSearch');               
        if (tr.style.display === "table-row") {
            tr.style.display = "none";
            window.onresize = onResizeWindow;
            onResizeWindow();
        } else {
            tr.style.display = "table-row";
            window.onresize = onResizeWindow2;
            onResizeWindow2();
        }
}