All geek questions in one place

Why is this javascript not working? Style change

I cannot have my life determine why this does not work:

JavaScript:

//==================================//
// resize_middle                            //
//----------------------------------//
// Resizes the content and left     //
// navigation div to make up the        //
// remains of available space.      //
//==================================//
function resize_middle()
{
    min_height = (window.innerHeight - 276) + "px";
    middle_left = document.getElementById("middle_left");
    middle_right = document.getElementById("middle_right");
    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}
//==================================//
// event handlers                           //
//==================================//
window.onload = resize_middle();
window.onresize = resize_middle();

html (only body bit and javascript in the header):

<script src="javascript.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="container">
        <div id="central_column">
            <div id="top_left">
                <img src="./images/icon.png" alt="icon" style="width:100%;height:auto;" />
            </div>
            <div id="top_right">
                top right
            </div>
            <div id="middle_left">
                middle left
            </div>
            <div id="middle_right">
                middle right
            </div>
            <div id="bottom">
                bottom
            </div>
        </div>
    </div>
</body>

I have used this before and have a working copy of some just a little different code, but it works fine. I get debugging notifications until “it will not work!” Which I do not receive. Thanks in advance, ell.

+3
source share
3 answers

Instead, you need to:

window.onload = resize_middle;
window.onresize = resize_middle;

Because, with the value resize_middle (), the function is processed immediately, and the result is added to the event. You want the function itself to be added to the event, so you do not include () if your function does not return a function for the event used.

+6

:

window.onload = resize_middle;
window.onresize = resize_middle;

. .

:

resize_middle , , , var .

function resize_middle()
{
      // Changed to use "var"
    var min_height = (window.innerHeight - 276) + "px";
    var middle_left = document.getElementById("middle_left");
    var middle_right = document.getElementById("middle_right");

    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}
+4
window.onload = resize_middle;

Read this resource for event handler assignment .

+2
source

Source: https://habr.com/ru/post/1784293/

More articles:


All Articles