JavaScript functions not loading

Question

I'm trying to run a function at pageload:

<script type="text/javascript" src="functions.js"></script>
<body onload="startUp();">

The problem is startUp() isn't running, nor is anything else that I try to refer to in my JS file. I am certain that the link to the JS file is correct; and even if it weren't, I even tried pasting all of functions.js right into the page header--still nothing. This is the content of functions.js:

function startUp() {
    document.write("running"); //for debugging
    alert("running"); //for debugging
    stretchAbdomen();
    if (defaultStyle()) {
        setStyleCookie(1, false);
    }
    else { //if mobilestyle
        setStyleCookie(0, false);
        if (!window.location.hash) {
            window.location.hash = "#mobilearea";
        }
    }
}

function stretchAbdomen() {
    var bodyheight = getbodyheight();
    var abdomen = document.getElementById('abdomen');
    if (window.innerHeight > bodyheight) {
        var currentpaddingstring = window.getComputedStyle(abdomen, null).getPropertyValue('padding-bottom');    
        var currentpadding = Number(currentpaddingstring.substring(0, currentpaddingstring.length - 2)); //-2 removes "px" from string
        abdomen.style.paddingBottom = (((window.innerHeight - bodyheight) + currentpadding) + "px";
    }
}

function getbodyheight() {
    var body = document.body,
    html = document.documentElement;
    return Math.min( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

/*** BELOW HERE SHOULD NOT BE RELEVANT FOR THE QUESTION ***/

window.onresize = resetStyleCookie; 

function defaultStyle() {
    if (window.getComputedStyle(document.getElementById('mobilearea')).getPropertyValue('width') == "1px")
        return true;
    else return false;
}

function resetStyleCookie() {
    document.cookie = "stylecookie=" + "; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    setStyleCookie(defaultStyle() ? 1 : 0, true); //forcereset because otherwise it wasn't working on subpages
}

function setStyleCookie(number, forcereset) {
    if (document.cookie.indexOf("stylecookie") == -1 || forcereset) {
        var now = new Date();
        var time = now.getTime();
        time += 3600 * 150000;
        now.setTime(time);
        document.cookie = "stylecookie=" + number + "; expires=" + now.toGMTString() + "; path=/"; 
    } 
}

I have to assume that there's some compile-time problem in functions.js, but my debugging tools show no errors, nor can I find anything myself. The call to startUp() simply does nothing, even when I don't rely on the onload event to call it. Thanks for any insight!

Refer to this. http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded — Gireesh, Oct 15 '13 at 21:16

score 1 · Accepted Answer · answered Oct 15 '13 at 21:27

1

You have an error in your JS code. Try using JSLint.com to validate your code.

if (window.innerHeight > bodyheight) {
    var currentpaddingstring = window.getComputedStyle(abdomen, null).getPropertyValue('padding-bottom');    
    var currentpadding = Number(currentpaddingstring.substring(0, currentpaddingstring.length - 2)); //-2 removes "px" from string
    abdomen.style.paddingBottom = (((window.innerHeight - bodyheight) + currentpadding) + "px";
}

You are missing the last ) on abdomen.style.padding.bottom.

Error: Expected ')' to match '(' from line 22 and instead saw ';'.

answered Oct 15 '13 at 21:27

Mat Carlson

503
3
12

1

That was it, thanks! I did run it through JSLint, but JSLint complained about a bunch of things like spaces and tabs and then said it was quitting. Probably I didn't use it correctly. – Edward Chien Oct 16 '13 at 02:25
I run it with Assume browser; Tolerate == and !=, unused parameters, missing 'use strict' pragma, stupidity, inefficient subscripting, and messy white space. At least for the first pass when I'm trying to find an error in several hundred lines. – Mat Carlson Oct 18 '13 at 19:19

score 0 · Answer 2 · answered Oct 15 '13 at 21:48

<html>

<head>

<script type="text/javascript">

function startUp() {
document.write("running"); //for debugging
alert("running"); //for debugging

//stretchAbdomen();
if (defaultStyle()) {
    setStyleCookie(1, false);
}
else { //if mobilestyle
    setStyleCookie(0, false);
    if (!window.location.hash) {
        window.location.hash = "#mobilearea";
    }
}
}

</script>

</head>

<body onload="startUp();">

</body>

</html>

The above code works for me. As you can see, I've taken only the function you are trying to reference and have put it in script tags -- but it works. It seems to me that the problem occurs when you try to reference the stretchAbdomen function.

score -1 · Answer 3 · answered Oct 15 '13 at 21:19

-1

You need to reference the function, f.e.

<body onload="startUp">

Make sure to reference it after it was defined (as you did in your example with the external JavaScript).

answered Oct 15 '13 at 21:19

Thomas

7,584
2
15
29

No. In fact, html attributes contain function bodies, so it should be a function call. – Maciej Łebkowski Oct 15 '13 at 21:23

JavaScript functions not loading

3 Answers3