document.getElementsByClassName doesn't work with button

Ok, my fault was this: var a1[i] = document.getElementsByClassName("menu");

This code works:

 var a1 = document.getElementsByClassName("menu");
         a1[i].onmouseover = txtover
         a1[i].onmouseout = txtout

Conclusion: Sachin Singh was right: class is the same as CssClass and the code of Pasang Tamang is also correct.

Thanks

Hi,

Still, if you want to achieve this in Javascript for learning purpose then you have to change your code a bit. Below is the corrected code. Since you are using getElementsByClassName, indexing should be with element, not variable.

        for (i = 0; i < 2; i++) {
            var a1 = document.getElementsByClassName("menu")[i];
            a1.onmouseover = txtover;
            a1.onmouseout = txtout;
        }

Regards,
Pasang

Can you please inspect the element and check in browser, means

Run the application.

On browser select the particular element (Button) by dragging and Right click and inspect , check what is the class name there?

Like this.

Javascript is all about browser, so if you have any doubt directly run the code on browser's console.

Thanks all for replying. I knew the solution with CSS, but i'm trying tot do this with javascript as exercise. Suppose i want to change the height of all buttons or something like that when clicking on it.

I don't understand very well what Sachin Singh means (Can you please inspect the element and check in browser?)

Thanks again

Hello,

Its better to use css which will help you to maintain unique layout for your all button for long run. As pasang Tamang added class in css you can create in css which will work for entire project where you want to use menu class and easy to main rather then javascript or jquery.

you can use simple class instead of cssclass . Try below code.

//css 




            
            

            

Hi,
I suggest to use CSS for this. CSS is much better than handling in Javascript. Your CSS should looks like below.

.menu{
   color: black;
}
.menu:hover{
   color: #BCAEA5;
}

Regards,
Pasang