Infinite loop with form onkeyup

[John Musbach]

Hi, I have the following form:

<form name="xf">X: <input type="text" name="xtb" onKeyUp="xcheck()">px <INPUT TYPE="button" NAME="x" Value="+" onMouseDown="iid=setInterval('incVE(x)',150)" onMouseUp="clearInterval(iid)"><INPUT TYPE="button" NAME="xm" Value="-" onMouseDown="iid=setInterval('incVE(xm)',150)" onMouseUp="clearInterval(iid)"></form><br><form name="yf">Y: <input type="text" name="ytb" onKeyUp="ycheck()">px <INPUT TYPE="button" NAME="y" Value="+" onMouseDown="iid=setInterval('incVE(y)',150)" onMouseUp="clearInterval(iid)"><INPUT TYPE="button" NAME="ym" Value="-" onMouseDown="iid=setInterval('incVE(ym)',150)" onMouseUp="clearInterval(iid)"></form>

The related javascript functions:

function load()
{
//Run automatically when webpage
//loads.
//Here we init the initial form value
//variables and set the forms to the
//value of those variables.
xc=document.getElementById("virte").offsetWidth;
yc=document.getElementById("virte").offsetHeight;
document.xf.xtb.value=xc;
document.yf.ytb.value=yc;
[...]
}
function incVE(what)
{
//This function is used by the x&y buttons
//to manipulate VE map size should it be too
//small when user changes their resolution.
//It takes a string through param 'what' and
//that string must be only 'x', 'y', 'xm', or 'ym'.
//Then depending on the parameter value x or
//y is automatically incremented or decremented at both the
//div and the map.
var curx=document.getElementById("virte").offsetWidth;
var cury=document.getElementById("virte").offsetHeight;
var nx=0;
var ny=0;
if(what=="x") {
nx=curx+1;
document.getElementById("virte").style.width=nx+"px";
vemap.Resize(nx,cury);
//set textbox to reflect new VE size
document.xf.xtb.value=document.getElementById("virte").offsetWidth;
}
else if (what=="y") {
ny=cury+1;
document.getElementById("virte").style.height=ny+"px";
vemap.Resize(curx,ny);
//set textbox to reflect new VE size
document.yf.ytb.value=document.getElementById("virte").offsetHeight;
}
else if (what=="xm") {
nx=curx-1;
document.getElementById("virte").style.width=nx+"px";
vemap.Resize(nx,cury);
//set textbox to reflect new VE size
document.xf.xtb.value=document.getElementById("virte").offsetWidth;
}
else if (what=="ym") {
ny=cury-1;
document.getElementById("virte").style.height=ny+"px";
vemap.Resize(curx,ny);
//set textbox to reflect new VE size
document.yf.ytb.value=document.getElementById("virte").offsetHeight;
}
else {
alert("Provided parameter: "+what+" is invalid! Only x, y, xm, or ym may be passed to this function!");
}
}
function xcheck()
{
//Here we check to see if form value
//is different from what it already
//was. If it is, resize VE.
if(document.xf.xtb.value!=xc)
{
document.getElementById("virte").style.width=document.xf.xtb.value+"px";
vemap.Resize(document.xf.xtb.value,document.getElementById("virte").offsetHeight);
xc=document.getElementById("virte").offsetWidth;
}
}
function ycheck()
{
//Here we check to see if form value
//is different from what it already
//was. If it is, resize VE.
if(document.yf.ytb.value!=yc)
{
document.getElementById("virte").style.height=document.yf.ytb.value+"px";
vemap.Resize(document.getElementById("virte").offsetWidth,document.yf.ytb.value);
yc=document.getElementById("virte").offsetHeight;
}
}

The problem is that although the buttons work fine, whenever I change the value of the form manually the browser will lockup. I suspect the problem is in xcheck() and ycheck() but where? Thanks! :)

[edited by: John_Musbach at 7:16 pm (utc) on Aug. 7, 2008]

[httpwebwitch]

Is this happening in more than one browser? try it in both IE and FF.

If it's happening in FF, install the Firebug extension. In the "Script" tab, click "Options > Break on all errors"

Address any errors that appear in the Firebug console.

If the problem persists, experiment with setting Breakpoints... step through your code a line at a time, watch for any obvious loops or things that happen too many times.

Often when you fix a bug in Firefox, the error goes away in IE as well. If it doesn't... then my sincere and heartfelt condolences are yours.

[John Musbach]

Thanks but there is no error logged and when I use alert boxes to track where the code is going, it always gets to either:

yc=document.getElementById("virte").offsetHeight;

or

xc=document.getElementById("virte").offsetWidth;

and the browser then either freezes infinitely (IE) or prompts me to stop the script (firefox) so it's not very helpful. But I don't even get why those two functions are causing infinite loops. There is no while or for in those functions, it's almost as if onkeyup is firing infinitely for some reason. Anymore ideas?

[edited by: John_Musbach at 8:03 pm (utc) on Aug. 7, 2008]

[John Musbach]

Ok, as it turns out this issue is caused by a really weird bug with the Virtual Earth API. The API didn't like me resizing the map so suddenly so I worked around the bug by using a for loop that goes from 0 to the value in the form when resizing.

[httpwebwitch]

strange. But heck, if it works, then great! glad you found your answer.

Welcome to WebmasterWorld!