PDA

View Full Version : Trouble passing variables to another function



polyglot
06-04-2009, 02:02 AM
Hello-

I am new to JS and am having a problem with getting the following function to pass the variables theimage and theimage2 to another function. The variables are declared at the beginning of my full body of code outside of any function (they are global), so I am pretty sure this is not the source of the problem. Can someone please look at the offending code and tell me why the variables aren't being passed? In a nutshell, the function is designed to assign specific images to the variables based on certain conditions. I appreciate any help! Here's the code:


function determineImage() {
var x, y, xold, yold, xdiff, ydiff;
document.onmousemove = FindXY;


function FindXY(loc) {
x = (document.layers) ? loc.pageX : event.clientX;
y = (document.layers) ? loc.pageY : event.clientY;
xdiff = x - xold;
ydiff = y - yold;


if ((xdiff < 2) && (ydiff < -2)) {
theimage = "n.gif";
theimage2 = "s.gif";
return theimage;
return theimage2;
}
else if ((xdiff < 2) && (ydiff > 2)) {
theimage = "s.gif";
theimage2 = "nw.gif";
return theimage;
return theimage2;
}
else if ((xdiff > 2) && (ydiff < 2)) {
theimage = "e.gif";
theimage2 = "s.gif";
return theimage;
return theimage2;
}
else {
theimage = "w.gif";
theimage2 = "nw.gif";
return theimage;
return theimage2;
}

xold = x;
yold = y;

}
}

:confused::confused::confused:

Nile
06-04-2009, 02:32 AM
Please provide all the code, you said you made them global and put them outside the functions, provide that to.

forum_amnesiac
06-04-2009, 07:19 AM
Totally agree with Nile, we need to see more code, eg what the other function is, how is it called, the initial declaration of the variables, etc.

The problem may not rest inside the function you have posted, it could be elsewhere

polyglot
06-04-2009, 11:39 AM
Thanks for having a look at my code... here is the entire code, including the html in which it resides:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style type="text/css">
<!--
h1 {
color:#cc3333;
font-family:"Comic Sans MS",Helvetica;
}
h3 {
color:#993333;
font-family:"Comic Sans MS",Helvetica;
}
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</style>

<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak

//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script


kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
var theimage, theimage2


//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer
lastX = 0
lastY = 0




//Collection of functions to get mouse position and place the images


function determineImage() {
var x, y, xold, yold, xdiff, ydiff;
document.onmousemove = FindXY;


function FindXY(loc) {
x = (document.layers) ? loc.pageX : event.clientX;
y = (document.layers) ? loc.pageY : event.clientY;
xdiff = x - xold;
ydiff = y - yold;


if ((xdiff < 2) && (ydiff < -2)) {
theimage = "n.gif";
theimage2 = "s.gif";
return theimage;
return theimage2;
}
else if ((xdiff < 2) && (ydiff > 2)) {
theimage = "s.gif";
theimage2 = "nw.gif";
return theimage;
return theimage2;
}
else if ((xdiff > 2) && (ydiff < 2)) {
theimage = "e.gif";
theimage2 = "s.gif";
return theimage;
return theimage2;
}
else {
theimage = "w.gif";
theimage2 = "nw.gif";
return theimage;
return theimage2;
}

xold = x;
yold = y;


}
}



function doKisser(e) {

posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}


}
// Get the horizontal position of the mouse
function getMouseXPos(e) {


if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}


}
// Get the vartical position of the mouse
function getMouseYPos(e) {


if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}

}

//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {

var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1

}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){

//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = doKisser;
} else {
//document.onmousemove = determineImage;
document.onmousemove = doKisser;
}

}
window.onload=kissbegin


// decloak -->
</script>







</head>

<body>

<script language="JavaScript" type="text/JavaScript">

determineImage();

if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}

// decloak -->
</script>

<p align="center" class="style1"><font face="Arial">This is where my content will go...</font> </p>
</body>
</html>

forum_amnesiac
06-04-2009, 12:25 PM
My first comment is that when I tried this, I got errors, you need to debug the code before you can find out if the javascript is working properly.

The first problem is that in the function determineImage() you are calling FindXY().

This function is defined as FindXY(loc). It is expecting an object, "loc", to be passed to it.

What is it you are trying to achieve, the Kisser Trail script you got from this site allows you to add other images.

polyglot
06-04-2009, 06:21 PM
I am trying to create a script that will place images of paw prints on the page - the paw prints will go in the same direction as the mouse. This is why I need to determine the mouse direction, and for each direction (N, S, E, W, NE, NW, SE, and SW) I have a right paw print image (which would be assigned to the variable theimage) and a left paw print image (which would be assigned to the variable theimage2). I know the image names in the code don't make sense right now in terms of accomplishing this effect, but I plan on straightening this out later - right now I just want to get the code to work and to show an image. The problem is the images aren't showing because the variables aren't being passed to the script in the BODY.

I like the kisser trail script because it allows me to accomplish part of what I want to do, but it doesn't allow me to dynamically change the image based on the direction of the mouse. I'm sure you probably think this is an ambitious endeavor for being a first javascript project, but I like a challenge! :cool:

I hope you can help!

forum_amnesiac
06-05-2009, 07:08 AM
Ok, I understand what you are trying to achieve.

The first thing to do however is to debug your code, in your browser under Tools, Internet Options, Advanced you should find an option that says 'disable javascript debugging', if this is ticked then untick it. Then run your script.

As I said in my previous post, your function FindXY is expecting a variable passed to it but it is not receiving one from the calling function.

If there are javascript errors the function will definitely not process as expected, if at all.

polyglot
06-05-2009, 12:37 PM
Hmmm... not sure what to do about the FindXY function... the function is exactly as it was in the original script (which was a simple script I found that changed the mouse cursor arrow depending on the direction of the mouse), and it worked fine. In the original script the loc argument was present in the function definition, but not in the call to the FindXY function. Is this perhaps a case where I need to make loc a global variable so that the script in the BODY portion of the HTML can access it?

I checked the internet options to see if "disable script debugging" was selected and it wasn't. I am not familiar with how to debug script in Internet Explorer - could you enlighten me?

I appreciate all your help! :)

forum_amnesiac
06-05-2009, 01:27 PM
If the Disable script debugging in IE, is not ticked then that is pretty much all you need to do to find out if your script works bug-free.

If you run your script and there is a problem then there will be an alert telling what the error is and on what line.

Where did you find the mouse cursor script, give a link to the full code, because the variable loc must be defined in it somewhere

polyglot
06-05-2009, 02:15 PM
The URL where I found the mouse direction script is:

http://javascript.internet.com/miscellaneous/mouse-direction.html

When I run my script, no error messages appear at the bottom of the browser - the only thing that happens is that little red "X"s appear where images should be appearing.

I am at a complete loss as to why I can't get the script to determine which images to use based on the mouse direction, and then to send the images to the kisser trail script via the theimage and theimage2 variables. I thought that this would be fairly simple to do, but it has been anything but simple.

I certainly hope you can help!

polyglot
06-05-2009, 02:17 PM
I also checked to make sure the images specified in the script were in the same directory as the HTML file to ensure that the error was not due to broken links... all images are there.