Log in

View Full Version : DOM and DHTML question


mahrndt
04-09-2005, 09:24 PM
Hello,

I have below code, and I am trying to access one of the <LI with a DOM and the click method, so that href is followed. Now, I cannot figure out, which item or childnode to select, to do the "click" on the link.
Does anybody have an idea? or any other solution...

Michael

<DIV id=categories><DIV class=box>
<DIV class=title>
<H1><IMG class=num_img alt=1 src="images/num_1.gif"> Odds</H1></DIV>
<DIV class=content><!-- <small>Select:: <a href="#">All,</a> <a href="#">None</a></small><br/> --><SMALL>Expand: <A href="https://www.nordicbet.com/selection?cmd=expand_all">All for love,</A> <A href="selection?cmd=expand_default">None</A></SMALL><BR><SMALL>Date: <A href="selection?cmd=ending&amp;day=0">Today</A>, <A href="selection?cmd=ending&amp;day=1">Tomorrow</A>, <A href="selection?cmd=ending&amp;day=2">2 Days</A>, <A href="selection?cmd=ending&amp;day=3">3 Days</A></SMALL><BR><SMALL>Time: <A href="selection?cmd=ending&amp;hour=1">1 Hour</A>, <A href="selection?cmd=ending&amp;hour=2">2 Hours</A>, <A href="selection?cmd=ending&amp;hour=4">4 Hours</A>, <A href="selection?cmd=ending&amp;hour=8">8 Hours</A>, <A href="selection?cmd=ending&amp;hour=12">12 Hours</A></SMALL><BR>
<UL>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=1"><B>Football </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=5"><B>Ice Hockey </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=7"><B>Baseball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=24"><B>Basketball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=103"><B>Cycling </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=253"><B>Floorball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=385"><B>Golf </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=38"><B>Handball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=124"><B>Table Tennis </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=116"><B>Volleyball </B></A></LI></UL></DIV>
<DIV class=bottom>&nbsp;</DIV></DIV></DIV>
jscheuer1
04-09-2005, 10:20 PM
I just tested your code. It is sending the information, what's the problem? Do you want to use 'onClick=' instead of 'a href='? Do you want to send more information per click? Is the receiving page working? If not, what does your receiving code look like?
mahrndt
04-09-2005, 10:53 PM
Thanks for you quick response.
I would want to do something like you can see in the script section - and I cannot figure out, how to select this link or href with the method: .click
I get an error message all the time, even if I do not select this child node as below, even if I go up a 1 or two in the hierachy but I cannot make it to follow the link... funny enough, if you save below in a Htm file and then you are able to click on the "Link" and it works fine, but I cannot get it to work automatically.

Do you have an idea for a possible work around?
thanks Michael



<html>
<head>
<title>Sample code </title>
<script>
function start() {
document.getElementById("categories").childNodes.item(0).childNodes.item(1).childNodes.item(7).childNodes.item(1).childNodes.item(0).childNodes.item(0).click
}
</script>
</head>

<BODY onload="start()"><DIV id=categories>
<DIV class=box>
<DIV class=title>
<H1><IMG class=num_img alt=1 src="images/num_1.gif"> Odds</H1></DIV>
<DIV class=content><!-- <small>Select:: <a href="#">All,</a> <a href="#">None</a></small><br/> --><SMALL>Expand: <A href="https://www.nordicbet.com/selection?cmd=expand_all">All for love,</A> <A href="selection?cmd=expand_default">None</A></SMALL><BR><SMALL>Date: <A href="selection?cmd=ending&amp;day=0">Today</A>, <A href="selection?cmd=ending&amp;day=1">Tomorrow</A>, <A href="selection?cmd=ending&amp;day=2">2 Days</A>, <A href="selection?cmd=ending&amp;day=3">3 Days</A></SMALL><BR><SMALL>Time: <A href="selection?cmd=ending&amp;hour=1">1 Hour</A>, <A href="selection?cmd=ending&amp;hour=2">2 Hours</A>, <A href="selection?cmd=ending&amp;hour=4">4 Hours</A>, <A href="selection?cmd=ending&amp;hour=8">8 Hours</A>, <A href="selection?cmd=ending&amp;hour=12">12 Hours</A></SMALL><BR>
<UL>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=1"><B>Football </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=5"><B>Ice Hockey </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=7"><B>Baseball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=24"><B>Basketball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=103"><B>Cycling </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=253"><B>Floorball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=385"><B>Golf </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=38"><B>Handball </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=124"><B>Table Tennis </B></A>
<LI class=expanded>+ <A href="/selection?cmd=select_category&amp;category_id=116"><B>Volleyball </B></A></LI></UL></DIV>
<DIV class=bottom>&nbsp;</DIV></DIV></DIV>

</body>
</html>
mwinter
04-09-2005, 11:46 PM
document.getElementById("categories").childNodes.item(0).childNodes.item(1).childNodes.item(7).childNodes.item(1).childNodes.item(0).childNodes.item(0).clickA couple of things:


You're not calling the click method, just evaluating it (which will do nothing).
The click method may not actually do anything for security and privacy reasons. You should also test that it exists (by evaluating it, funnily enough) before calling it:


if(linkElement.click) {linkElement.click();} It's simpler to subscript the childNodes collection using square brackets. That is, childNodes[0] instead of childNodes.item(0).
The most important issue: you cannot reliably walk through the document tree in the way you're attempting to. Opera, Firefox, and other user agents include text nodes that contain purely whitespace in the document tree (the correct behaviour). IE does not. These text nodes obviously upset the indices you need to use. The best approach is to loop through the nodes looking for the right type of node (using the tagName property, for instance). In fact, I think you're accessing a text node anyway, but I might have miscounted.
You could just make life easier for yourself and id any important elements so you can access them directly.

Mike