getElementById returns empty

W

Wade

Im purchased Simply Javascript from Sitepoint and Im working on some
of these tutorials and none of them are working. I do not understand
what is wrong.

The html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Get Tag By ID</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pg84.css" />
<script type="text/javascript" src="pg84.js" />
</head>

<body>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</body>
</html>


And here is the script:
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");
koko.setAttribute("title", "Koko sets the title");


And the error is:
koko has no properties
[Break on this error] koko.setAttribute("href", "/GetKoko/");

Wade
 
E

Evertjan.

Wade wrote on 09 mrt 2008 in comp.lang.javascript:
Im purchased Simply Javascript from Sitepoint and Im working on some
of these tutorials and none of them are working. I do not understand
what is wrong.

Your tutorial, probably! And purchased too.

Read the NG FAQ first. Then read the archive of this NG.

The html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

This is an XML page, why? Javascript does not need XML.
<head>
<title>Get Tag By ID</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pg84.css" />
<script type="text/javascript" src="pg84.js" />

This is illegal, try:

</head>

<body>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</body>
</html>


And here is the script:
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");

koko.href = '/GetKoko/'
koko.setAttribute("title", "Koko sets the title");

koko.title = 'Koko sets the title';
And the error is:

On wat browser?
koko has no properties
[Break on this error] koko.setAttribute("href", "/GetKoko/");
 
W

Wade

Wade wrote on 09 mrt 2008 in comp.lang.javascript:
Im purchased Simply Javascript from Sitepoint and Im working on some
of these tutorials and none of them are working. I do not understand
what is wrong.

Your tutorial, probably! And purchased too.

Read the NG FAQ first. Then read the archive of this NG.

<www.jibbering.com/faq/>


The html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

This is an XML page, why? Javascript does not need XML.
<head>
<title>Get Tag By ID</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pg84.css" />
<script type="text/javascript" src="pg84.js" />

This is illegal, try:

<body>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</body>
</html>
And here is the script:
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");

koko.href = '/GetKoko/'
koko.setAttribute("title", "Koko sets the title");

koko.title = 'Koko sets the title';
And the error is:

On wat browser?
koko has no properties
[Break on this error] koko.setAttribute("href", "/GetKoko/");
Your tutorial, probably! And purchased too.
Im not sure what you mean here.
Yes, its a tutorial Im reading out of Simply Javascript and yes, I
purchased the book.
This is an XML page, why? Javascript does not need XML.
You would have to ask the author but, most likely as this is only the
beginning of the book and they use the same template throughout.
koko.href = '/GetKoko/'
koko.title = 'Koko sets the title';

I subed your code for the other and received same error as before on
line 1 which is: var koko = document.getElementById("koko");

Im using Firefox 2.0.0.12 using Firebug 1.05 extension.

Wade
 
J

Jeff North

On Sat, 8 Mar 2008 15:06:21 -0800 (PST), in comp.lang.javascript Wade
<[email protected]>
| Im purchased Simply Javascript from Sitepoint and Im working on some
| of these tutorials and none of them are working. I do not understand
| what is wrong.
|
| The html page:
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
| <head>
| <title>Get Tag By ID</title>
| <meta http-equiv="Content-Type" content="text/html;
| charset=utf-8" />
| <link rel="stylesheet" type="text/css" href="pg84.css" />
| <script type="text/javascript" src="pg84.js" />
| </head>
|
| <body>
| <a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
| </body>
| </html>
|
|
| And here is the script:
| var koko = document.getElementById("koko");
| koko.setAttribute("href", "/GetKoko/");
| koko.setAttribute("title", "Koko sets the title");
|
|
| And the error is:
| koko has no properties
| [Break on this error] koko.setAttribute("href", "/GetKoko/");
|
| Wade

Notice where the script tag is and the id tag is. That is the order in
which the browser executes the code and html tags. In other words,
your script is executing before the page is rendered therefore the id
doesn't exist as yet.

To solve this you need to wrap your code in a function and then call
that function.

----- pg84.js file ----
function init() {
//--- existing code goes here
}
window.onload = init;

Alternatively, move the <script ...> tag to just before the </body>
tag. There will be no need to alter the page84.js file.
-- -------------------------------------------------------------
(e-mail address removed) : Remove your pants to reply
-- -------------------------------------------------------------
 
W

Wade

@gmail.com>
<[email protected]>
wrote:


| Im purchased Simply Javascript from Sitepoint and Im working on some
| of these tutorials and none of them are working. I do not understand
| what is wrong.
|
| The html page:
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
| <head>
| <title>Get Tag By ID</title>
| <meta http-equiv="Content-Type" content="text/html;
| charset=utf-8" />
| <link rel="stylesheet" type="text/css" href="pg84.css" />
| <script type="text/javascript" src="pg84.js" />
| </head>
|
| <body>
| <a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
| </body>
| </html>
|
|
| And here is the script:
| var koko = document.getElementById("koko");
| koko.setAttribute("href", "/GetKoko/");
| koko.setAttribute("title", "Koko sets the title");
|
|
| And the error is:
| koko has no properties
| [Break on this error] koko.setAttribute("href", "/GetKoko/");
|
| Wade

Notice where the script tag is and the id tag is. That is the order in
which the browser executes the code and html tags. In other words,
your script is executing before the page is rendered therefore the id
doesn't exist as yet.

To solve this you need to wrap your code in a function and then call
that function.

----- pg84.js file ----
function init() {
//--- existing code goes here}

window.onload = init;

Alternatively, move the <script ...> tag to just before the </body>
tag. There will be no need to alter the page84.js file.
-- -------------------------------------------------------------
(e-mail address removed) : Remove your pants to reply
-- -------------------------------------------------------------

Thanks for that Jeff.
So that could account for why none of these scripts have worked.
Ill try that on all of them.

Again, thanks for that explanation.

Wade
 
T

Thomas 'PointedEars' Lahn

It is an XHTML 1.0 Strict document; not "an XML page", whatever that might
be in your world. XML is primarily used as a data exchange format, and as
a language to define other document types. The notion of people calling
something a page that clearly has no distinct properties of a page at all
never ceases to amaze me.

The title should be "Get Element By ID". Tags are not elements, and
elements are not tags. Elements *consist of* tags, and sometimes content.

This does not make much sense in XHTML. The encoding of the document entity
has to be declared before it is is parsed (with the Content-Type HTTP
header, a BOM, or an XML declaration's `encoding' attribute), as the parser
could be an XML parser which required the document to be well-formed in the
first place.

Not at all. The `script' element content is empty here, so the XML SHORTTAG
syntax may be used.

<script type="text/javascript" src="pg84.js" />

is equivalent to


That is the syntax that is required for HTML, and for XHTML served
as text/html because both are parsed by a tag-soup HTML parser.

There is the actual problem. The script code is included in the `head'
element, and therefore executed before the element with ID "koko" was
parsed. Meaning that if D::gEBI() already works at this point, it returns
`null'.
^^^^^^^^^^^^^
And `null' has no properties:
[...]
And the error is: [...]
koko has no properties ^^^^^^^^^^^^^^^^^
[Break on this error] koko.setAttribute("href", "/GetKoko/");
koko.href = '/GetKoko/'
koko.title = 'Koko sets the title';

Therefore this won't help here, although it is generally more reliable.
Im using Firefox 2.0.0.12 using Firebug 1.05 extension.

Firefox supports XHTML. If you serve it as application/xhtml+xml or use the
..xhtml filename suffix for local files, the built-in XML parser will be used
and you can make use of XML SHORTTAG syntax. However, well-formedness is a
requirement then. (Note that well-formedness does not imply validity.)

However, you should be aware that XHTML is not well supported on the Web to
date, so you should use it only where absolutely required.

http://hsivonen.iki.fi/xhtml-the-point/
http://hixie.ch/advocacy/xhtml
http://www.spartanicus.utvinternet.ie/no-xhtml.htm


PointedEars
 
T

Thomas 'PointedEars' Lahn

Wade said:
[...]
| <script type="text/javascript" src="pg84.js" />
| </head>
|
| <body>
| <a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
| </body>
| </html>
|
| And here is the script:
| var koko = document.getElementById("koko");
| koko.setAttribute("href", "/GetKoko/");
| koko.setAttribute("title", "Koko sets the title");
|
| And the error is:
| koko has no properties
| [Break on this error] koko.setAttribute("href", "/GetKoko/");
Notice where the script tag is and the id tag is. That is the order in
which the browser executes the code and html tags.

There is no "script tag", there is a `script' element that is represented by
a `<script>' start tag and an end tag in XML SHORTTAG syntax. `id' is _not_
a tag, it is an *attribute*. The browser does not execute anything; its
user agent includes a parser that usually parses the markup in
left-to-right, top-to-bottom order. (X)HTML is a markup language (as the
name says), not a programming language; it does not include commands or
statements; it is parsed, not executed.

Correct. The `script' is executed by the script engine as part/result of
the UA's parsing process.

The better solution is to use the standardized intrinsic `onload' event
handler attribute instead:

<body onload="init()">
...

Please trim your quotes, don't quote signatures.

http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1Trim


PointedEars
 
V

VK

Im purchased Simply Javascript from Sitepoint and Im working on some
of these tutorials and none of them are working. I do not understand
what is wrong.

The html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Get Tag By ID</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pg84.css" />
<script type="text/javascript" src="pg84.js" />
</head>

<body>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</body>
</html>

And here is the script:
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");
koko.setAttribute("title", "Koko sets the title");

And the error is:
koko has no properties
[Break on this error] koko.setAttribute("href", "/GetKoko/");

Im purchased Simply Javascript from Sitepoint and Im working on some
of these tutorials and none of them are working. I do not understand
what is wrong.

The html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Get Tag By ID</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pg84.css" />
<script type="text/javascript" src="pg84.js" />
</head>

<body>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</body>
</html>

And here is the script:
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");
koko.setAttribute("title", "Koko sets the title");

And the error is:
koko has no properties
[Break on this error] koko.setAttribute("href", "/GetKoko/");

There are two errors here: the one that actually prevents your code
from running and the other one that will break your code as soon as
page loaded into IE of any version or other browser if not served
with Content-type application/xhtml+xml and even then will fail on
some.

I will start with the later one:
The proper syntax for SCRIPT element is with closing tag:
<script srd="myfile.js"></script>
That was answered and explained a great amount of times in this NG,
the latest one read at:
http://groups.google.com/group/comp.lang.javascript/msg/ad3259010db1688c

The actual error is that your are trying to retrieve a DOM element
reference before document load event so before DOM tree is parsed and
build. You cannot do it, you have to wait for the page load or to use
different risky tricks I'm not in disposition to discuss.

This way (pseudo-XHTML ballast cleaned up):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8">
<title>Get Tag By ID</title>
<link rel="stylesheet" type="text/css" href="pg84.css">
<script type="text/javascript" src="pg84.js"></script>
</head>
<body>
<p>
<a id="koko" href="http://www.koko.com/">Lets all get KOKO!</a>
</p>
</body>
</html>

where pg84.js is:

// *********************
function init() {
var koko = document.getElementById("koko");
koko.setAttribute("href", "/GetKoko/");
koko.setAttribute("title", "Koko sets the title");
window.alert("OK");
}

window.onload = init;
// *********************


P.S. If you indeed arrived to both errors by instructions from the
book you bought then I would suggest to use your money back guarantee
(if provided).
 
J

Jeff North

On Sun, 09 Mar 2008 03:24:08 +0100, in comp.lang.javascript Thomas
'PointedEars' Lahn <[email protected]>

[snip]
| >> To solve this you need to wrap your code in a function and then call
| >> that function.
| >>
| >> ----- pg84.js file ----
| >> function init() {
| >> //--- existing code goes here}
| >>
| >> window.onload = init;
| >>
| >> Alternatively, move the <script ...> tag to just before the </body>
| >> tag. There will be no need to alter the page84.js file.
|
| The better solution is to use the standardized intrinsic `onload' event
| handler attribute instead:
|
| <body onload="init()">
| ...
| </body>

WRONG!!!!!!!
This goes against the standard of separating HTML,CSS and Javascript.
YOU are embedding Javascript within a HTML tag.
-- -------------------------------------------------------------
(e-mail address removed) : Remove your pants to reply
-- -------------------------------------------------------------
 
G

Gregor Kofler

Jeff North meinte:
WRONG!!!!!!!
This goes against the standard of separating HTML,CSS and Javascript.
YOU are embedding Javascript within a HTML tag.

What "standard" are you talking about?

Since window.onload is actually proprietary - according to W3C standards
it may be used with body or frameset elements - you can either choose a
non-standard handler or violate your "standard of separation".

Gregor
 
V

VK

Jeff North meinte:



What "standard" are you talking about?

Since window.onload is actually proprietary - according to W3C standards
it may be used with body or frameset

What in the name W3C has to do with window object? Neither W3C nor
ECMA are in power to define window and its method. They are defined by
the original producer Netscape, Inc. and are obligatory for any
browser producer for over 10 years by now. While Thomas is entitled to
be ridiculous (it brings too much pleasure to him I guess :) the
others should try to stay reasonable.
elements - you can either choose a
non-standard handler or violate your "standard of separation".

"Pardon my French", but that is a sample of a splendid bull sh** right
here.
 
J

John G Harris

On Sun, 09 Mar 2008 03:24:08 +0100, in comp.lang.javascript Thomas
'PointedEars' Lahn <[email protected]>


WRONG!!!!!!!
This goes against the standard of separating HTML,CSS and Javascript.
YOU are embedding Javascript within a HTML tag.

You can't be right. You mustn't try to attach javascript fragments to
DOM nodes before they're created. The only way to be sure they've all
been created is to do <body onload="...">. More accurately, it's the
only way built into the HTML standard and hence the only way guaranteed
to work in IE8.

More generally, this idea of separating HTML and javascript is silly.
When you change the HTML document you don't want to crawl through acres
of js files to find out if any code is affected. What you want is a
marker in the HTML document that says this element is linked to that
piece of javascript. The onclick, onsubmit, etc, attributes do that.

John
 
V

VK

More generally, this idea of separating HTML and javascript is silly.

LOL. Yet as you wish... Anyone is entitled on his own private opinion
as long as it remains private (other words unless you are hired to do
a commercial project).
When you change the HTML document you don't want to crawl through acres
of js files to find out if any code is affected. What you want is a
marker in the HTML document that says this element is linked to that
piece of javascript. The onclick, onsubmit, etc, attributes do that.

<body> element is not a form field and <body onload=".."> is not <form
onsubmit="...">
<body onload=".."> is the legacy equivalent of in-script window.onload
handler and it is out of the wide use since NN4/IE4
But again, as anyone wishes... I guess it is a bizzarity contest
morning here today.
 
T

Thomas 'PointedEars' Lahn

VK said:
What in the name W3C has to do with window object?
Neither W3C nor ECMA are in power to define window and its method.

That is not entirely true anymore. There exists a W3C Working Draft in an
attempt to specify the Window object and interface in order to standardize
universally implemented features of the object referred to by the `window'
property of the Global Object and other window-relevant properties:

http://www.w3.org/TR/Window/

But, unsurprisingly, you miss the point completely again. Whether the W3C
or Ecma International would have anything to do with `window' is entirely
irrelevant to the question of whether said feature could be considered a
proprietary one: A feature is considered proprietary as long as there
exists no public written-down standard that several vendors have agreed on
and implemented consistently. As such, `window' is a proprietary feature.
They are defined by the original producer Netscape, Inc. and are obligatory
for any browser producer for over 10 years by now.

Utter nonsense. The `window' property of the Global Object was part of the
JavaScript language implemented solely in Netscape Navigator until including
JavaScript version 1.3. It has never been part of Microsoft JScript, but
was implemented as part of the MSHTML DOM.

As such, it is a proprietary feature yet again, along with the properties of
the object referred to by it. Similar implementations of it do not make it
a Web standard per se.

As of version 1.4, in the spirit of interoperability, all host objects have
been removed from the JavaScript programming language, and have been defined
elsewhere instead, resulting in the *Core* JavaScript 1.4 and 1.5 References
(previously available at Netscape DevEdge, now at the Mozilla Developer
Center) as compared to the *Client-side* JavaScript 1.3 Reference and its
predecessors. However, some of those host objects are still supported in
Mozilla/5.0 for the most part, for backwards compatibility. Other
properties and host objects are still supported due to lack of a better
alternative; `window' is one of them.
While Thomas is entitled to be ridiculous (it brings too much pleasure
to him I guess :) the others should try to stay reasonable.

It is you who is ridiculous and unreasonable. However, given your current
record of misconceptions and application of mystical incantations, that is
not surprising at all.


PointedEars
 
T

Thomas 'PointedEars' Lahn

VK said:
LOL. Yet as you wish... Anyone is entitled on his own private opinion
as long as it remains private (other words unless you are hired to do
a commercial project).

Anyone is entitled to his opinion, in private *and* in public. This is
called the freedom of speech and is one of the great and important
achievements of modern civilization. Granted, it is not something that
someone apparently living in a country which citizens are only beginning to
learn about this could necessarily appreciate, but then maybe he should
better not make bold statements about it.


PointedEars
 
J

Jeff North

| Jeff North meinte:
|
| >> | <body onload="init()">
| >> | ...
| >> | </body>
| >
| > WRONG!!!!!!!
| > This goes against the standard of separating HTML,CSS and Javascript.
| > YOU are embedding Javascript within a HTML tag.
|
| What "standard" are you talking about?
|
| Since window.onload is actually proprietary - according to W3C standards
| it may be used with body or frameset elements - you can either choose a
| non-standard handler or violate your "standard of separation".
|
| Gregor

What is non-standard about window.onload=FunctionRef; ???????
How would it "violate my 'standard of separation'" ?????
-- -------------------------------------------------------------
(e-mail address removed) : Remove your pants to reply
-- -------------------------------------------------------------
 
J

Jeff North

| On Sun, 9 Mar 2008 at 10:54:35, in comp.lang.javascript, Jeff North
| wrote:
| >On Sun, 09 Mar 2008 03:24:08 +0100, in comp.lang.javascript Thomas
| >'PointedEars' Lahn <[email protected]>
|
| <snip>
| >>| The better solution is to use the standardized intrinsic `onload' event
| >>| handler attribute instead:
| >>|
| >>| <body onload="init()">
| >>| ...
| >>| </body>
| >
| >WRONG!!!!!!!
| >This goes against the standard of separating HTML,CSS and Javascript.
| >YOU are embedding Javascript within a HTML tag.
|
| You can't be right. You mustn't try to attach javascript fragments to
| DOM nodes before they're created. The only way to be sure they've all
| been created is to do <body onload="...">.

a. This is NOT separating script from HTML.
b. I haven't argued against the onload function.
| More accurately, it's the
| only way built into the HTML standard and hence the only way guaranteed
| to work in IE8.

Are you saying that MS has broken the web (again)?
| More generally, this idea of separating HTML and javascript is silly.
| When you change the HTML document you don't want to crawl through acres
| of js files to find out if any code is affected. What you want is a
| marker in the HTML document that says this element is linked to that
| piece of javascript. The onclick, onsubmit, etc, attributes do that.

Now, replace the word javascript with CSS in the above paragraph and
you have a good example why separation of code, css and HTML should be
done.
-- -------------------------------------------------------------
(e-mail address removed) : Remove your pants to reply
-- -------------------------------------------------------------
 
G

Gregor Kofler

Jeff North meinte:
What is non-standard about window.onload=FunctionRef; ???????
How would it "violate my 'standard of separation'" ?????

Something 's wrong with your keyboard. As with your way to argue...

Gregor
 
V

VK

Anyone is entitled to his opinion, in private *and* in public. This is
called the freedom of speech and is one of the great and important
achievements of modern civilization. Granted, it is not something that
someone apparently living in a country which citizens are only beginning to
learn about this could necessarily appreciate

You mean Germany or the US? You left me curious by this comment, yet
whatever.
 
T

Thomas 'PointedEars' Lahn

VK said:
You mean Germany or the US? You left me curious by this comment, yet
whatever.

Neither one. At least your NNTP-Posting-Host header indicates that you are
located in St. Petersburg, Russian Federation. (Another clue is your often
not using articles where they are needed and posting in seemingly gibberish
which is indicative of a quick translation of thought Russian into written
English). However, that might not be the case, hence "apparently".

As I see it, Russia has still a long way to go from being a totalitarian
one-party state to a free democracy. That includes granting fundamental
civil rights, such as the freedom of speech and freedom of press, which had
been established before but were restricted to a great extent by former
President Putin, notably for the most part in accordance with the current
constitution of the Russian Federation.

Anyway, no matter whether you are a Russian citizen, ISTM you still have
a long way to go in understanding fundamental civil rights such as free speech.


HTH

PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,001
Messages
2,570,254
Members
46,850
Latest member
VMRKlaus8

Latest Threads

Top