Best practices for retrieving objects using getElementById() [Archive]

View Full Version : Best practices for retrieving objects using getElementById()

Darth_Brooks

07-07-2007, 05:55 PM

I'm creating a simple calculator. For some reason, the
document.getElementById()
isn't retrieving the object properly, presumably because
of the DOM. I reduced my code quite a bit to make
the problem easier to identify.

Would someone be able to help me identify the best
practices for retrieving objects that are within the
document?

Here's a snippet of my code:

<html><head>
<style type="text/javascript">

</style>
</head>

<body bgcolor="bisque" onload="setValue()">
<div style="background: black;"><font size="15" color="white">Javascript10.1.html</font></div>
<span id="spanId" style="position: absolute; left: 50%; top: 70;">
<form id="formId">
<table bordercolor="brown" border=".5" cellspacing="0" cellpadding="0" width="150">
<tr>
<td colspan="2" width="50%"><input type="text" id="num1" /> </td>
<td colspan="2" width="50%"><input type="text" id="num2" /> </td>
</tr>
<tr>
<td width="25%"> <input type="button" style="width: 100%;" value="+" onclick="add()" /> </td>
<td width="25%"> <input type="button" style="width: 100%;" value="-" onclick="sub()" /> </td>
<td width="25%"> <input type="button" style="width: 100%;" value="*" onclick="mult()" /> </td>
<td width="25%"> <input type="button" style="width: 100%;" value="/" onclick="div()" /> </td>
</tr>
<tr height="25">
<td width="75%" colspan="3" />
<td width="25%" style="background-color: burlywood;" align="right">
<input type="text" id="answerBox" style="width :100%"/>

</td>
</tr>
</table>
</form>
</span>
</body>
</html>

I've been banging my head on this one and must be missing something elemental. Thanks!

Arbitrator

07-07-2007, 07:01 PM

Would someone be able to help me identify the best
practices for retrieving objects that are within the
document?I can tell you that referencing an ID by an ID is redundant since only one element may be assigned a given ID name in a document. Below is revised code.

<script type="text/javascript">
function setValue() {
//function should set the value of text-box to "Answer here"
document.getElementById('answerBox').value = "Answer here";
}
</script>

Your document has major errors that should be fixed too.

The document is missing a document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html). I’d recommend that of HTML 4.01 Strict even though you’re using XHTML syntax.
You should be using a script element instead of a style element.
You should not use SGML comment tags inside of script and style elements.
The title element is required.
form elements are not allowed inside of span elements.
span elements are not allowed inside of the body element under a Strict DTD.
The action attribute of the form element is required. If don’t need that attribute, don’t use the element.
If you use event attributes, then you should also set the Content-Script-Type header: <meta http-equiv="Content-Script-Type" content="text/javascript">.
There is no attribute named bordercolor.
Using self‐closing syntax on non‐empty elements will not work as you expect if you serve the document as text/html instead of an XML media type.
If you choose to use HTML, all of the closing slashes must be removed.
If you choose to use XHTML, you need to add a namespace declaration to the html element.
There’s no such thing as half of a pixel. Values for the border attribute should be integers.

Other Issues

The font element is deprecated and shouldn’t be used; use CSS instead.
The border, cellspacing, cellpadding, width (in general), height (in general), size, color, align, and bgcolor attributes are all deprecated presentational attributes and should not be used; use CSS instead.
The style attribute (inline CSS) should be avoided. Use embedded or external style sheets instead.
I would do the same for the event attributes: use embedded or external scripts instead of inline scripts.
You shouldn’t use tables for layout; they exist to associate tabular data. Use CSS instead.
text/javascript is deprecated too; unfortunately, Internet Explorer doesn’t support application/ecmascript or application/javascript, so you’ll have to stick with the deprecated media type or use conditional comments (http://www.quirksmode.org/css/condcom.html).

Darth_Brooks

07-07-2007, 07:20 PM

Thanks for your thoroughness! I really appreciate your taking
the time to point out a number of my errors. I've learned
alot!

Regards,