admin管理员组

文章数量:1428110

I cant for the life of me figure out why this doesn't 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(body & javascript bit in head shown only):

<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'v used this before and have a working copy of some only slightly different code, but it works perfectly. I get the debugging alerts up until "it works!", which I don't get. Thanks in advance, ell.

I cant for the life of me figure out why this doesn't 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(body & javascript bit in head shown only):

<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'v used this before and have a working copy of some only slightly different code, but it works perfectly. I get the debugging alerts up until "it works!", which I don't get. Thanks in advance, ell.

  • javascript
  • html
  • css
  • dom
Share Improve this question edited Apr 27, 2012 at 10:39 BoltClock 725k165 gold badges1.4k silver badges1.4k bronze badges asked Jan 8, 2011 at 19:13 EllEll 4,3746 gold badges37 silver badges63 bronze badges 2
  • 1 /* free-form ments\nvery useful they are */ – user395760 Commented Jan 8, 2011 at 19:20
  • 2 I strongly remend using a proper debugger for JavaScript, like Firebug for Firefox. – Matt Ball Commented Jan 8, 2011 at 19:21
Add a ment  | 

3 Answers 3

Reset to default 6

You need this instead:

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

Because as having it 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 leave off the () unless your function returns a function for the event to use.

You need this instead:

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

Currently you're calling those functions and assigning their return value to the event. What you want is to assign the functions themselves to the events, and let the events call them.

Side note:

Unless the variables in resize_middle are defined elsewhere and you intend for them to be accessible to the outer scope, it is good practice to use the var keyword when defining new variables.

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;
}

window.onload = resize_middle;

Read this resource on assigning event handlers.

本文标签： htmlWhy Doesn39t This Javascript Work Style ChangeStack Overflow

版权声明：本文标题：html - Why Doesn&#39;t This Javascript Work? Style Change - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745514758a2661475.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。