What is wrong with this code? [JavaScript]

Question

Everything works fine with id's, but I need it for more than 1 element. The point is to make a button that changes properties when user hovers cursor over it. I have tried to do mouseover[0],style[...] but it don't work either.

function mouseover() {
var mouseover = document.getElementsByClassName("other");
mouseover.style.backgroundColor = "#FF0000";
mouseover.style.border = " 3px solid rgba(130,0,0,1";
mouseover.style.boxShadow = " 0px 0px 60px rgba(130,0,0,1)";
mouseover.style.fontWeight = " bold";
}
function mouseout() {
var mouseout = document.getElementsByClassName("other");
mouseout.style.backgroundColor = "#820000";
mouseout.style.border = " 3px solid rgba(130,0,0,0)";
mouseout.style.boxShadow = " 0px 0px 30px rgba(130,0,0,0)";
mouseout.style.fontWeight = " normal";
}

Answer 1

Hm. Why do you use JavaScript for that? Try to use CSS:
.btn {
background-color: #820000;
...
}
.btn:hover {
background-color: #FF0000;
...
}
Anyway, Mario's answer is great. It should work, because .getElementsByClassName method returns a list.

Answer 2

for (var i = 0, p = document.getElementsByClassName("other"); i < p.length; i++) {
p.style.backgroundColor = "#FF0000";
....
}

Answer 3

document.getElementsByClassName returns an array-like object, so in order to access each element of a class, you should use a loop. Mario is almost right, he's missing the p's index (it should be
for(...){
p[i].style...
}
), so you change the style of each element instead of the array-like object.