using "this" in javascript/XHTML

Mike Kamermans · Nov 1, 2004

I'm trying to determine where inside an XHTML's DOM a javascript function
is triggered, but when I use the construction of calling a function with
"this" as parameter and then checking the event target inside the
javascript function, I get very very little love from javascript in an
XHTML setting.... I have put up the file that demonstrates my problem at:

http://www.nihongoresources.com/downloads/test/test.xml

(the jscript bit is http://www.nihongoresources.com/downloads/test/test.js)

If anyone knows what I'm doing wrong here, I'd appreciate any help =/

- Mike Kamermans
www.nihongoresources.com

Martin Honnen · Nov 1, 2004

Mike said:
I'm trying to determine where inside an XHTML's DOM a javascript function
is triggered, but when I use the construction of calling a function with
"this" as parameter and then checking the event target inside the
javascript function, I get very very little love from javascript in an
XHTML setting.... I have put up the file that demonstrates my problem at:

http://www.nihongoresources.com/downloads/test/test.xml

(the jscript bit is http://www.nihongoresources.com/downloads/test/test.js)

If anyone knows what I'm doing wrong here, I'd appreciate any help =/

First of all
window.event
is something IE supports but not something the W3C DOM wants so if you
want to script Mozilla make sure you pass the event object as a
parameter e.g.
<a onclick="change(event);"
with
function change (evt) {
// access for instance evt.target here
alert(evt.target);
}
As for the this object, you have
<a onclick="change(this)"
and traditionally the toString() value of an <a> element is its href
attribute, as you don't have a href attribute the alert shows nothing,
try instead
<a onclick="change(this);">
with
function change (obj) {
alert(obj.tagName)
and you will see that the object passed in is indeed an <a> element.

Mike Kamermans · Nov 1, 2004

Using event certain made things work.. =D

I don't suppose you'd know why the following code doesn't get rendered? I
call a replace function using an onload event in the body, which passes
the entire xml document as event (I had expected to get the body node,
but this also works I suppose). So I have in the xml:

<body onload=replace(event)>

And then in the js file I have a replace function that does this:

function replace(e) {
xmldoc = e.target;
replacenodes = xmldoc.getElementsByTagName('replace');

//forward traversal insert
for(var i=0;i<replacenodes.length;i++){
imnode = xmldoc.createElement('img');
imnode.setAttribute('src','add.gif');
var node = replacenodes;
var pnode = node.parentNode;
pnode.insertBefore(imnode,node);
}

//reverse traversal delete
for(var i=replacenodes.length-1;i>=0;i--){
replacenodes.parentNode.removeChild(replacenodes);
}
}

Now, this works, in the sense that <img src="add.gif"> elements get added
to the source (using a css file to draw the img elements as boxes for
instance shows boxes where they should be), but unlike for instance
adding an element called "p", and it consequently being rendered as a
paragraph upon insertion, the "img" element does not get rendered as an
image...

Any clues?

Much oblidged,

- Mike Kamermans
www.nihongoresources.com

Mike Kamermans · Nov 1, 2004

Err, perhaps also useful is to say what the intention was =)

I want to replace all [add] elements in my xml document with
elements that have as attribute set [src="add.gif",
onclick="recommendAddition(event)", alt="recommend an addition",
width="9px", height="9px, border="0"].

I figured I'd "fake" a replacementan by making [img] nodes, inserting
them before each [add] node, and then deleting all the [add] nodes from
the document tree once that was done.

(the justification for this is that it would save a lot of bandwidth for
the server, because it has a heck of a lot less data to send, and users
would be able to see the requested document faster)

- Mike Kamermans
www.nihongoresources.com

Martin Honnen · Nov 2, 2004

Mike said:
imnode = xmldoc.createElement('img');

If you want to create an XHTML <img> element in an XML document then you
need to use
innode = xmldoc.createElementNS('http://www.w3.org/1999/xhtml', 'img')
as you need to make sure the element has the proper XHTML namespace.

Mike Kamermans · Nov 2, 2004

Hmm.. Thanks, that works. Though it's odd one needs to define the namespace
when the element is inserted in a DOM that uses the xhtml NS as default NS,
set up through the <html xmlns="..."> top level tag.

Mike

Martin Honnen · Nov 2, 2004

Mike said:
Though it's odd one needs to define the namespace
when the element is inserted in a DOM that uses the xhtml NS as default NS,
set up through the <html xmlns="..."> top level tag.

Well check the DOM documentation and you will find that createElement is
not namespace aware, even if it appears odd to you. And if you insert an
element the namespaces in scope of the parent do not matter.

using javascript in .xhtml file	5	May 17, 2006
Internet Explorer XHTML window.onload issue	9	Dec 18, 2007
XSLT transform of XHTML page content in Internet Explorer	6	Oct 27, 2006
how to dynamically create forms in xhtml with javascript?	2	Oct 6, 2005
DOCTYPE in XSL-stylesheet while using XMLDOM with JScript	3	Mar 12, 2007
Reach components in content using javascript	2	Jul 11, 2007
Firefox javascript won't work (works in IE)	2	Feb 14, 2007
trouble with this javascript in a webpage	0	Dec 19, 2008

using "this" in javascript/XHTML

Mike Kamermans

Martin Honnen

Mike Kamermans

Mike Kamermans

Martin Honnen

Mike Kamermans

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads