Updating text when class element changes

I'm trying to change text depending on what 'slide' my slider is on.

[fetimo]

Hey guys,

I'm trying to change text depending on what 'slide' my slider is on.

So far I've got:

var li_active = document.getElementsByName('li');
var vis = li_active.style;
if (vis.color=='red') {
  document.getElementById('puppetDesc');
if (style.display == "none") {
  style.display = "block"
}
} else {
document.write('no puppet');
}

But Firebug is saying vis isn't defined. Am I even going the right way about it? JavaScript is still fairly alien to me.

If it helps to envisage what I'm trying to achieve you can see the page here: [fetimo.com ].

[daveVk]

var li_active = document.getElementsByName('li');

this will return an array of elements so you need to loop thru each of them

var el
for ( var i=0; (el=li_active[i++]); ) {
var vis = el.style;
... etc ...
}

document.getElementById('puppetDesc');

This statement does nothing ?

at top of code put
var descEl = document.getElementById('puppetDesc');

then if color is red, maybe something like
descEl.innerHTML = 'Have a red one';

document.write('no puppet');

DONT use document.write in this situation maybe
descEl.innerHTML = 'no puppet';
OR
alert('no puppet');

[fetimo]

Hey daveVk, thank you for you help. Unfortunately it made no sense to me =p

So I've decided to go for a much simpler approach:

function show() {
if (document.getElementById('puppet').style.color=='#ff0000') {
document.getElementById('puppetDesc').style.display='block';
} else {
document.getElementById('puppetDesc').style.display='none';
}
}

But this isn't working either, any idea why? It works with:

if (document.getElementById('puppet').style.color='#ff0000') {

but that isn't the behaviour I want.

I should note that the colour changes when a user rolls over it so when it's that colour (when it is active) that is when I want the div to appear. The colour is applied to the class but the computed colour should be the same as that, right? So it should be able to be accessed this way.

Thoughts?

[fetimo]

I now have this which works! The only caveat being it only works in Opera and I have no idea why this is the case, can anyone enlighten me?

function show() {
if (getComputedStyle(document.getElementById('puppet'),null).color=='#ff0000' || getComputedStyle(document.getElementById('puppet'),null).color=='rgb(255,0,0)' || getComputedStyle(document.getElementById('puppet'),null).color=='red') {
  document.getElementById('puppetDesc').style.display='block';
} else {
  document.getElementById('puppetDesc').style.display='none';
}

[daveVk]

getComputedStyle does not work in all browsers [quirksmode.org...]