counting elements in class

[Bogey]

hey hey,I want to run a javascript, but this function has to loop several times (as much a there are elements in a class)...How can I count the number of items in a particular class?And is it wise to use Java? cause Java can be disabled!!! Is it more wise, to go around Java and try it on a different way?

[brucemand]

i think you mean Javascript, there is a difference.i don't know if there are more advanced methods to do what you want, but to get the 'count' it's

var get_elem=getElementsByClassName('yourclassname')var count=get_elem.length;

just FYI, i'm also a beginner, so i hope that's correct !!

[Bogey]

YES! that did it :)This is what I did:

var count=document.getElementsByClassName('MyClassName');alert (count.length);

THNX THNX THNX

[ShadowMage]

Be aware that the getElementsByClassName function is not supported by IE 8 and down.Dierdre's Dad has a good workaround on his blog.

[Bogey]

Thnx ShadowMage... now it works perfectly... also in older version of IE :)One more thing:I have a .CSS-file in which I use .classname:hover to change the color of the buttons, when hovering the mouse over...When I reload my page, it works fine!!!When I push a button, then I go to a javascript file (onmouseclick) en run the script, to change the colors of the buttons...After that, the :hover effect isnt working anymore... how can I get it done so the hover effect still active? Do I need te reload the css. file or so?Hope I make myself clear?

[ShadowMage]

When I push a button, then I go to a javascript file (onmouseclick) en run the script, to change the colors of the buttons...After that, the :hover effect isnt working anymore... how can I get it done so the hover effect still active? Do I need te reload the css. file or so?Hope I make myself clear?

I assume you're modifying the style attribute (ie, button.style.color = 'red') and the style attribute is the same as adding inline styles to the HTML tag itself (like, <input type='button' style='color: red;' />). Since inline styles override those set in embedded or external stylesheets, I think that's why you no longer see the hover effect from your stylesheet.What exactly is the purpose of changing the colors in the script? Is it a theme picker? Or does it serve some other purpose?

[Bogey]

The purpose is:I want on startup all buttons in "div_navigation" be BLACK, when hovering over, the buttons have to change GREEN and back to BLACK.When I push my "home" button, then the home.php appears in my div_main and the home button turns GREEN.When I push "contact" button, then contact.php appears in div_main and contact button turns GREEN and ALL others (home included) turn BLACK again...Still want the hovering effect :SOr am I doing all this above on a very wrong manner, has it to be done in a different way?PS I am new to php/java/css... I picked it up again, lot of years ago I was quite busy with VB and VBA and some HTML, but that is more then 5 years ago...No I am starting again and make myself a nice homepage :)EDIT: oh yes.... I am changing the style attribute.... backgroundcolor in this case

[ShadowMage]

When you change all other buttons back to black, don't set it specifically to black. Reset it to a blank string instead.Ie,Instead of:button.style.backgroundColor = 'black';do this:button.style.backgroundColor = '';That should let your CSS stylesheet take over again.

[Bogey]

YESSS SUPER!!!!thnx :)EDIT:It works on: FireFox, Safari, Chromebut NOT on IE :S (the hover doesnt work at all there! even not at startup)

[jeffman]

It might be better to create a separate class for the affected button(s), complete with :hover behaviors. Instead of changing specific properties, change the button's className.

[Bogey]

I don't quite understand what you mean.I tell my situation in short:1.) index.php contains 4 div's (header, navigation, main, footer)2.) navigation contains 4 buttons (home, about, work, contact)3.) when button (2) is clicked, then home.php/about.php/work.php/contact.php load in div "main"4.) the button which page is shown in "main" has to be green, the other ones blackSo far al working fine... I now only miss the hover effect...

[ShadowMage]

DD brings up a good point. In your stylesheet, just create another class (let's call it 'active') and give it the styles you want for the selected menu item (ie, the green background).

.menuBtn, .active { /* Notice this targets your existing class and the new class you'll create */   ...All your existing style definitions for the normal button state...}.menuBtn:hover {   ...All existing hover styles...}.active {   /* This is where you'll set the active styles for the clicked menuBtn */   background-color: green;}

Then in your JavaScript, instead of changing individual style properties, you'll change the class.Ie, change this:button.style.backgroundColor = 'green';to this:button.className = 'active';As for why the :hover isn't working in IE, it's probably due to an incorrect/missing DTD. I think any one will work, but Strict is probably best. (Check here if you don't know what a DTD is)

[Bogey]

Super everyone!!!!! :)Works great now...Hover works.... I don't change the button style, but I change the class... SUPERB....thnx thnx thnx