Ryan Andrews Ryan Andrews - 6 months ago 9
HTML Question

Can a javascript file call a function defined in the main html file?

I can't seem to get this to work. I am including a javascript file with functions in it, but one of the functions in the file I want to be defined inside the main HTML file, not the javascript file. This isn't working however.

Here's what I want:

//testFile.js
$(function() {
$(window).scroll(function() {
var Scroll = $(window).scrollTop();
var Width = $(window).width();
var Height = $(window).height();
var Offset;

doParallax();
});

function Parallax(Obj, /*OffX, OffY,*/ ModifierX, ModifierY, Wait) {
var ScrollT = $(window).scrollTop();
var ScrollL = $(window).scrollLeft();
var OffsetY = ScrollT - $(Obj).data("InitialTopOffset");
var OffsetX = ScrollL - $(Obj).data("InitialLeftOffset");
var SpeedX = OffsetX*ModifierX + XOff;
var SpeedY = OffsetY*ModifierY + YOff;

if (Wait) {
if (ScrollT >= $(Obj).data("InitialTopOffset")) {
$(Obj).stop(true, false).css( "background-position", (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
}
}
else {
$(Obj).stop(true, false).css( "background-position", (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
}
}
});


//

//main HTML file
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function doParallax() {
XOff = ( $(window).width() - ( $(window).width()*0.9 ) ) / 2;
Parallax(".parallax3", 0, -0.55, true);
}
</script>
<script src="testFile.js"></script>
</head>
<body>
...
</body>
</html>


I haven't been able to find anything from doing google searches or from searching on Stack Exchange. But assuming that it isn't working means that I can't do this, but is there a way to achieve the desired result?

EDIT: Actual code examples

Answer

This is invalid:

<script src="testFile.js">
function somethingElse() {
   alert("Called");
}
</script>

A script tag either references a script or contains a script. Not both. Separate them into their own tags:

<script src="testFile.js"></script>
<script>
function somethingElse() {
   alert("Called");
}
</script>

(Of course, this is ignoring the fact that the contrived example never calls doSomething(), but I assume that's just an oversight in the example.)

Note also that there may be a scope issue depending on when you call this function. If doSomething() is invoked before somethingElse() is in scope, that could be a problem. You may be able to hoist it to the top of the current scope by defining it like this though:

var somethingElse = function() {
    alert("Called");
}

Not sure if that's even an issue here though, since the code in the question doesn't actually invoke any functions.


Edit: Since the question has drastically changed...

In a comment above you mention the problem:

The console is actually now saying that Parallax() is not defined.

This is because that function exists only within the scope of the function you're using in the document.ready handler. To simplify:

$(function () {
    // anything created here only exists here
});

// so you can't call it here

If you have functions which need to be invoked outside that scope, define them outside of that scope:

$(function () {
    // perform document ready handler actions here
});

var Parallax = function() {
    //...
}

var doParallax = function() {
    //...
}
Comments