Prev: Question about constructor property vs. instanceof
Next: What browser doesn't support ajax ?
From: nameless on 11 Jan 2010 14:49
Why this code doesn't work ?

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

function hello() {
alert("Hello World!");
}


function load() {
var el = document.getElementByClassName("uffa");
el.addEventListener("click", hello, false);
}


</script>
</head>
<body onload="load()";>

<a href="#" class="uffa">Hello</a>

</body>
</html>
From: JR on 11 Jan 2010 15:33
On 11 jan, 17:49, nameless <xsatelli...(a)gmail.com> wrote:
> Why this code doesn't work ?
>
> <html>
> <head>
> <script type="text/javascript">
>
>    function hello() {
>      alert("Hello World!");
>    }
>
>    function load() {
>      var el = document.getElementByClassName("uffa");
>      el.addEventListener("click", hello, false);

There´s no getElementByClassName method in DOM. But in HTML5 there
will be a method *getElementsByClassName*:
http://www.w3.org/TR/html5/dom.html

Ciao,
JR
From: RobG on 11 Jan 2010 15:44
On Jan 12, 5:49 am, nameless <xsatelli...(a)gmail.com> wrote:
> Why this code doesn't work ?
>
> <html>
> <head>
> <script type="text/javascript">
>
>    function hello() {
>      alert("Hello World!");
>    }
>
>    function load() {
>      var el = document.getElementByClassName("uffa");

The method is called "getElementsByClassName" (note the 's' on
Elements). It is part of the HTML 5 draft specification and has only
been implemented in a few recent browsers so you should do a feature
test and provide an alternative for browsers that don't provide it as
a host method.

<URL: http://dev.w3.org/html5/spec/Overview.html#dom-document-getelementsbyclassname
>

>      el.addEventListener("click", hello, false);

Since el will be a (live) collection in conforming browsers, and
probably an array where a native method has been substituted, you
probably want to enumerate its members and add the click listener to
each one:

for (var i=0, len=el.length; i<len; i++) {
el[i].addEventListener(...);
}


Also, addEventListener is not available in some recent, and many
older, browsers so you should also test for that and provide an
alternative.


>    }
>
> </script>

--
Rob
From: Thomas 'PointedEars' Lahn on 11 Jan 2010 16:21
RobG wrote:

> Since el will be a (live) collection in conforming browsers, and
> probably an array where a native method has been substituted, you
> probably want to enumerate its members and add the click listener to
> each one:
>
> for (var i=0, len=el.length; i<len; i++) {
> el[i].addEventListener(...);
> }

Or you could find the common ancestor (when in doubt, the BODY element), and
add a listener that tests the className. That would be a lot more
efficient.

> Also, addEventListener is not available in some recent, and many
> older, browsers so you should also test for that and provide an
> alternative.

What other *recent* implementations except MSHTML that support CSS classes
do not support it?


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
From: Garrett Smith on 11 Jan 2010 19:46
RobG wrote:
> On Jan 12, 5:49 am, nameless <xsatelli...(a)gmail.com> wrote:
>> Why this code doesn't work ?
>>
[...]

el.addEventListener("click", hello, false);
>
> Since el will be a (live) collection in conforming browsers, and
> probably an array where a native method has been substituted, you
> probably want to enumerate its members and add the click listener to
> each one:

[...]
The cost of doing that could be avoided by using bubbling.
[...]

If only one element is of concern, give the element an ID and use
document.getElementById.
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/
 |  Next  |  Last
Pages: 1 2 3
Prev: Question about constructor property vs. instanceof
Next: What browser doesn't support ajax ?