onclick change class 1

[thompom]

Hi,

Have a list of dates that when clicked changes the colour of the text by changing the class of the surrounding div
responseNOW = selected date / response = normal

<div id="01/01/2009" class="responseNOW"><a href="#" onclick="setdate('01/01/2009');">01/01/2009</a></div>
<div id="02/01/2009" class="response"><a href="#" onclick="setdate('02/01/2009');">02/01/2009</a></div>

function setdate(date) {
var NAME = document.getElementById(date) 
NAME.className="responseNOW" 
}

can anyone tell me how to make dates that arent clicked go back to class response

 

[feherke]

Hi

[tt]id[/tt] means "identifier", so the [tt]id[/tt] attribute's value must be a valid identifier. "01/01/2009" is not a valid identifier.

I do not understand what you are trying to do there, but one thing is sure : it looks like a bad idea.


Feherke.

http://rootshell.be/~feherke/

 

[thompom]

Hi there - have stripped out the '/' from my ids
so ids are in the format 01012009

i am trying to show a user that a date is selected.
if they click on a date it should change the class of the div to responseNOW and set other divs to response

there probably needs to be a common identifier
for each date div e.g <Div id="DATE01012009">
and then use getelementbyid to search for divs with "DATE" at the beginning.
After that i need to loop through all and set the class to 'response'

lastly i need to set the clicked div class to 'responseNOW' with the date passed to the function as above

 

[feherke]

Hi

use getelementbyid to search for divs with "DATE" at the beginning.

That is not possible. You will need [tt]getElementsByTagName()[/tt] or something similar. Or XPath.

Still no idea about what you want to do, but I feel like I would start with something like this :

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate('bar',this);return false"[/i][/green][b]>[/b]foo[b]</a></div>[/b]

[b]function[/b] [COLOR=darkgoldenrod]setdate[/color][teal]([/teal]date[teal],[/teal]what[teal])[/teal]
[teal]{[/teal]
  what[teal].[/teal]innerHTML[teal]=[/teal]date
  what[teal].[/teal]parentNode[teal].[/teal]className[teal]=[/teal][green][i]'responseNOW'[/i][/green]
[teal]}[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[BillyRayPreachersSon]

so ids are in the format 01012009

Which is still invalid, because AFAIK, they shouldn't start with a number...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[thompom]

Hi - thanks for your ideas

just to clarify:

I have 5 dates listed across the page.
When a user clicks on a date i want it to highlight the date to show that the date is selected.
If another date is clicked the new date will be highlighted
and the previous date will be unhiglighted.

have also added the prefix DATE to my div ids.

 

[feherke]

Hi

Finally ! So you want kind of fake radio buttons. We have such code in this thread, would be enough to search for.

Anyway.

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate(this);return false"[/i][/green][b]>[/b]1[b]</a></div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate(this);return false"[/i][/green][b]>[/b]2[b]</a></div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate(this);return false"[/i][/green][b]>[/b]3[b]</a></div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate(this);return false"[/i][/green][b]>[/b]4[b]</a></div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"response"[/i][/green][b]><a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"setdate(this);return false"[/i][/green][b]>[/b]5[b]</a></div>[/b]

[b]var[/b] selecteddate
[b]var[/b] datedivlist
[b]function[/b] [COLOR=darkgoldenrod]setdate[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](![/teal]datedivlist[teal])[/teal] [teal]{[/teal]
    [b]var[/b] list[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]
    datedivlist[teal]=[][/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]list[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [b]if[/b] [teal]([/teal]list[teal][[/teal]i[teal]].[/teal]className[teal].[/teal][COLOR=darkgoldenrod]substr[/color][teal]([/teal][purple]0[/purple][teal],[/teal][purple]8[/purple][teal])==[/teal][green][i]'response'[/i][/green][teal])[/teal] datedivlist[teal].[/teal][COLOR=darkgoldenrod]push[/color][teal]([/teal]list[teal][[/teal]i[teal]])[/teal]
  [teal]}[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]datedivlist[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] datedivlist[teal][[/teal]i[teal]].[/teal]className[teal]=[/teal][green][i]'response'[/i][/green]
  selecteddate[teal]=[/teal]what[teal].[/teal]innerHTML
  what[teal].[/teal]parentNode[teal].[/teal]className[teal]=[/teal][green][i]'responseNOW'[/i][/green]
[teal]}[/teal]

And in the JavaScript variable selecteddate you will have the text of the last clicked date link.

Feherke.

http://rootshell.be/~feherke/

 

[thompom]

thanks v. much,
was trying to show that I made an effort but instead confused the problem ;-)

 

[feherke]

Hi

Oops. And I confused the thread with the forum : "We have such code in this thread[red]forum[/red]".

Feherke.

http://rootshell.be/~feherke/