Document Type and JavaScript
janedenone
I recently experienced an odd issue: A JavaScript function refers to
an input field by ID (the ID is used as a function parameter). When no
document type is specified at the top of the HTML page, this works
fine, but adding a document type declaraction (<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">)
breaks the script. It claims that the object specfified by the ID
cannot be found.
Is there any interaction between the document type and this seemingly
basic DOM reference?
Thanks in advance,
Jan
Ronald J Kimball
I think it would be helpful to see the JavaScript function and the HTML for
the input field.
Ronald
Charlie Garrison
On 13/01/10 at 4:24 AM -0800, janedenone
<janed...@googlemail.com> wrote:
>Is there any interaction between the document type and this seemingly
>basic DOM reference?
I have seen a few cases where invalid syntax can cause that. Do
a document syntax check and look for errors. An improperly
closed tag could cause that.
Charlie
--
Ꮚ Charlie Garrison ♊ <garr...@zeta.org.au>
〠 PO Box 141, Windsor, NSW 2756, Australia
O< ascii ribbon campaign - stop html mail - www.asciiribbon.org
http://www.ietf.org/rfc/rfc1855.txt
Jonathan Lundell
If you're going to declare a doctype, it'd be best to validate that your page conforms to the type.
http://validator.w3.org/ is your friend in this regard.
janedenone
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
input {
font-size:11px;
}
</style>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script language='JavaScript' src='timepicker.js' type="application/
javascript"></script>
</head>
<body>
<div>
<form method='post' action=".">
<table>
<tr valign="middle">
<td>
<input id='timepicker1' type='text' value='11:15' size='8'
maxlength='8' onblur='validateDatePicker(this)'>
</td>
<td>
<img src='http://dekaserver-test.dekanat-phil.uni-koeln.de/pics/
timepicker/timepicker.gif' border='0' alt='Pick a Time!'
onclick='selectTime(this,"timepicker1")' style='cursor:hand'
width='30' height='20'>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
and this is the JavaScript code (also abbreviated):
function selectTime(ctl,ctl2) {
var id2=ctl2;
ctl2 = document.getElementById(id2);
textCtl = ctl2;
if ((currentCtl != ctl) && (currentCtl !== null)) { // not the
same
currentCtl.src = imagePath + "timepicker.gif"; // prev button
in released state
}
currentCtl = ctl;
currentCtl.src = imagePath + "timepicker2.gif"; // curr button
pressed state
ctl2.value === "" ? '12:00' : ctl2.value;
var res=validateDatePicker2(ctl2);
if (res){ refreshTimePicker(ctl2.value); }
else{ refreshTimePicker(0); }
aPos = getAbsPos(ctl);
crossobj.left = ctl.offsetLeft + aPos.left;
crossobj.top = ctl.offsetTop + aPos.top + ctl.offsetHeight + 2;
crossobj.visibility = (docGeid || ie) ? "visible" : "show";
hideElement( 'SELECT', document.getElementById("timepicker") );
hideElement( 'APPLET', document.getElementById("timepicker") );
// make the time picker modal.
curtain.show();
bShow = true;
}
Many thanks,
Jan
Ronald J Kimball
the JS function was able to find the 'timepicker1' element.
Which line of the JS is the error reported on?
I notice that these two lines:
hideElement( 'SELECT', document.getElementById("timepicker") );
hideElement( 'APPLET', document.getElementById("timepicker") );
look for the id "timepicker", rather than "timepicker1". Is there an
element with id "timepicker" in the full HTML?
Ronald
janedenone
reference syntax, but there's one more problem. The overlay created by
the JS function is placed at the upper left of the window, instead of
the icon which is clicked to display the overlay. This is the function
to calculate the overlay position (used for crossobj element quoted
above):
// get absolute position of a control. use with overlays, dropdowns,
etc.
function getAbsPos(ctl) {
var leftpos = 0;
var toppos = 0;
var aTag = ctl;
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName != "BODY");
var o = new Object();
o.left = leftpos;
o.top = toppos;
return o;
}
What could I change about this function to ensure the overlay is
placed correctly?
Thanks,
Jan