PDA

Click to See Complete Forum and Search --> : HTML tags interfering with Javascript

Dudsmack
11-04-2003, 09:12 PM
Is there any way HTML can interfere with JavaScipt. I made a new page, it has some content, some tables, and a few images and i copied some javascript code (that I have used succesfuly in other similair pages) both before the body and in the body. But everytime it comes up with errors. I know the Javascript code is good, i know my html code is good, and i know i didn't leave out </script> or anything. Is it possible for HTML to interfere with JavaScript code? The error occurs only when I am trying to call the javascript function when I am inside a table.

no this javascript code doesn't do anything dynamic or detect events, it's just a series of functions to manipulate strings.
gil davis
11-04-2003, 09:20 PM
Your page proves that HTML can indeed interfere with javascript.

If you care to post a link, or attach the page in text format, someone could give you a hand in sorting it out.
Dudsmack
11-04-2003, 09:35 PM
Ok, I've narrowed it down a bit more. Turns out it errors whenever I create a DIV using JavaScript from within a cell, Here's the code snipit of the function that is causing errors:

else if ( document.body.innerHTML != undefined ) // for W3C DOM Complaint
{ oParent.innerHTML += '<div id="' + divID + '" style="position:absolute;left:0px;top:0px;width:10px;">new</div>';

document.getElementById(divID).style.visibility = 'hidden';
}

I completely forgort this script uses DIVs to sort data, sorry i didn't post that in my original post.
gil davis
11-04-2003, 11:05 PM
Why are you making this harder than it has to be? Is your code top secret or something? The little that you have posted doesn't tell much of anything.

All I can do is guess that you have done something in the wrong scope by using a sloppy IE-legal short cut.

What I mean is that when you are inside a DIV, anything you script has a scope that is pertinent to the DIV and not the document. So it may be that document.getElementById() inside a DIV isn't defined because there is no document in the DIV.

Another possibility is what is known as a "race condition". You cannot neccessarily access something that you just created, because it has to exist in the document tree before you can use it. Since JS is a "threaded interpreter", the browser can start reading the next instruction (a fast process) while the DIV is being created (a slow process).
Dudsmack
11-04-2003, 11:37 PM
Sorry, not trying to make this hard, I've been trying to keep it simple, here's the entire html document (I don't have it loaded on a server yet):
Like I said it all works fine EXCEPT when i call it from within a table. I've cut out everything but the esential.


<html>
<head><title></title></head>
<script LANGUAGE="JavaScript">
function linkObject(objectName)
{
tempObject = null;
if (document.getElementById) //WC3 method for handling of dhtml objects
{
tempObject = document.getElementById(objectName).style;
tempObject.surname = objectName;
tempObject.innerHTML = function(newContents)
{ if (newContents != undefined && newContents != null && newContents != '')
{ document.getElementById(objectName).innerHTML = newContents; }
else
{ return document.getElementById(objectName).innerHTML; }
}
return tempObject;
}
else if (document.layers) //Netscape4/Rhino-ish handling of dhtml objects
{ tempObject = eval('document.layers['+objectName+']');
tempObject.prototype.backgroundColor = document.layers[objectName].bgColor;
tempObject.innerHTML = function(newContents)
{ eval(objectName + '.document').open();
eval(objectName + '.document').write(newContents);
eval(objectName + '.document').close();
}
return tempObject;
}
else if (document.all) //IE4/Web-TV-ish handling of dhtml objects
{ tempObject = eval('document.all['+objectName+'].style');
tempObject.innerHTML = function(newContents)
{ if (document.getElementById(objectName).innerHTML != 'undefined')
{ if (newContents != null)
{ document.getElementById(objectName).innerHTML = newContents; }
else
{ return document.getElementById(objectName).innerHTML; }
}
}
return tempObject;
}
}

//===================
function createDIV(divID, parentDIV)
{
var tmp = '<div id="' + divID + '" style="position:absolute;left:0px;top:0px;width:10px;">new</div>';

var oParent = document.body;
if ( document.getElementById && parentDIV != undefined ) oParent = document.getElementById(parentDIV);
if ( document.layers ) // Netscape 4
{ var lParent = (parentDIV != undefined) ? document.layers[parentDIV] : null;
document.layers[divID] = (lParent != null) ? new Layer(10,lParent) : new Layer(10);
document.layers[divID].hidden = false;
document.layers[divID].visibility = 'hidden';
document.layers[divID].document.open();
document.layers[divID].document.write('new');
document.layers[divID].document.close();
}
else if ( document.body.innerHTML != undefined ) // for W3C DOM Complaint
{ oParent.innerHTML += tmp;
document.getElementById(divID).style.visibility = 'hidden';
}
else if ( document.body.insertAdjacentHTML ) // for Ineternet Explorer 4+
{
oParent.insertAdjacentHTML('BeforeEnd', tmp);
}
}


</script>
<body>


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%">
<script language="JavaScript">
if (document.layers) { document.write('---=>document.layers method supported /(Netscape 4 method/)<br>'); }
if (document.all) { document.write('---=>documents.all method supported (IE 4 method)<br>'); }
if (document.getElementById) { document.write('---=>getElementbyId method supported (W3C DOM complaint method)<br>'); }
document.write('<hr>');
document.write('I am now going to create a blue box in the top, left corner of the screen. If you do not see it there has been an error!');
/////////////////////////
createDIV('testObject');
//testLink = linkObject('testObject');
//testLink.top = '10';
//testLink.left = '10';
//testLink.width = '250';
//testLink.height = '250';
//testLink.backgroundColor ='blue';
//testLink.visibility = 'visible';
</script>

&nbsp;</td>
</tr>
</table>


</body>

</html>
skriptor
11-06-2003, 05:55 AM
Hi,

try something like this:

...


function kiki() {
createDIV('testObject');
testLink = linkObject('testObject');
testLink.top = '10';
testLink.left = '10';
testLink.width = '250';
testLink.height = '250';
testLink.backgroundColor ='blue';
testLink.visibility = 'visible';
}
</script>
<body onload="kiki()">

...

Good luck, skriptor