Simple Javascript dom navigation? 1

[Katie6]

Hi there,

Just need a quick bit of DOM navigation advice - In the code below I'm looking to dynamically change the class of the <ul> when the user clicks on the <li> item.

So if the user clicks on the first <li> it'll become onestar, if they click on the second it'll become twostar etc...

As I want to use several of these on the same page, it'd be nice if I could refer to the parentelement (ul) using dom scripting.

So could someone give me a pointer as to how I can set the <ul> element this way?

I was trying this.parentNode.className = x;

but that doesn't seem to work? Do I need to define this. or is it just the last item selected in the DOM?

Many thanks for any nifty code you can provide!

<script>
test(x){

}
</script>

<ul class="nostar">
<li><a href="#" onClick="test(1)">One</a></li>
<li><a href="#" onClick="test(2)">Two</a></li>
<li><a href="#" onClick="test(3)">Three</a></li>
<li><a href="#" onClick="test(4)">Four</a></li>
<li><a href="#" onClick="test(5)">Five</a></li>
</ul>

 

[BillyRayPreachersSon]

Using "this.parentNode.className" would work if you are referring to the LI element (as you've asked). However, your clicks are on anchors inside the LIs... so you'd need to either:

1) insert an extra "parentNode" (this.parentNode.parentNode.className), or

2) Put the onclick handlers on the LI elements not on the anchors.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Katie6,

Did that work for you? Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Katie6,

Did that work for you? Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Lowet]

Here is how it could be done:

<script>
test(x)
{
var obj = event.srcElement;
obj.parentNode.parentNode.className = x+'star';
}
</script>

<ul class="nostar">
<li><a href="#" onClick="test('one')">One</a></li>
<li><a href="#" onClick="test('two')">Two</a></li>
<li><a href="#" onClick="test('three')">Three</a></li>
<li><a href="#" onClick="test('four')">Four</a></li>
<li><a href="#" onClick="test('five')">Five</a></li>
</ul>

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[tsuji]

What is this to begin with before talking about helpfulness?
>test(x){}
[tt]function test(x) { }[/tt]

 

[Lowet]

Well, I just used same function name as Katie6 wrote in the beginning..
I would choose a name like "setStars".

the test function takes a string argument and changes the UL list classname with it..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[tsuji]

No worry, I am only addressing to op and some eager to help.

 

[Lowet]

hehe.. I see..
I just copied his code and changed it.
Of curse I should notised the "function"..

Below is the correct code.

<script>
function setStar(am)
{
var obj = event.srcElement;
obj.parentNode.parentNode.className = am+'star';
}
</script>

<ul class="nostar">
<li><a href="#" onClick="setStar('one')">One</a></li>
<li><a href="#" onClick="setStar('two')">Two</a></li>
<li><a href="#" onClick="setStar('three')">Three</a></li>
<li><a href="#" onClick="setStar('four')">Four</a></li>
<li><a href="#" onClick="setStar('five')">Five</a></li>
</ul>

Thanks for notising, tsuji.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]