Issue loading JS function onload

Question

I am trying to set it so the borders change color on different elements on my site based on which page the user is currently on. I am using PHP to determine the page, and then setting the variable $color (within the JS function) based on the PHP determination

For some reason, this will not work at all. I've even tried putting the function in a onmouseover to see if it would work, and it would not.

I must have an error somewhere within this JS function. I've got other ones that I've put together, and they are working fine. I am very new to JS, so I may not pick up on the obvious errors yet.

Here is the JS function I am trying to load.

function colorchange($color) {
    var $header = document.getElementsByClassName('header');
    $header.style.borderColor = $color;

    var $contentblock = document.getElementsByClassName('contentblock');
    $contentblock.style.borderColor = $color;

    var $rightfloat = document.getElementsByClassName('rightfloat');
    $rightfloat.style.borderColor = $color;

    var $footer = document.getElementsByClassName('footer');
    $footer.style.borderColor = $color;

    var $mainimg = document.getElementsByClassName('mainimg');
    $mainimg.style.borderColor = $color;

    var $menucontainer = document.getElementsByClassName('menucontainer');
    $menucontainer.style.borderColor = $color;
}

I am calling it here:

<body onload="<?php echo $changecolor; ?>">

And this is the PHP snippet to determine the color.

if (isset($pageid)) {
    if ($pageid == "ministries") {
        $changecolor = "colorchange('#a52926');";
    }
    if ($pageid == "events") {
        $changecolor = "colorchange('#a54a4c');";
    }
    if ($pageid == "prayer") {
        $changecolor = "colorchange('#459979');";
    }
    if ($pageid == "about") {
        $changecolor = "colorchange('#a55029');";
    }
    if ($pageid == "contact") {
        $changecolor = "colorchange('#469e47');";
    }
} else {
    $changecolor = "colorchange('#26996d');";
}

Thanks for your time and help.

Answer 1

document.getElementsByClassName returns multiple elements, not just one. Because of this, you cannot do .style on it. You need to loop through the returned elements and set .style on each one.

var $header = document.getElementsByClassName('header');
for(var i = 0, len = $header.length; i < len; i++){
    $header[i].style.borderColor = $color;
}

EDIT: I suggest giving all the elements you want to change the color of the same class (for example: changeColor ). That way you don't need all those different getElementsByClassName statements.

function colorchange(color) {
    var colorChange = document.getElementsByClassName('colorChange');
        for(var i = 0, len = colorChange.length; i < len; i++){
            colorChange[i].style.borderColor = color;
        }
}

Issue loading JS function onload

Question

1 answers

solution1
0 ACCPTED 2012-08-08 16:37:40

Issue loading JS function onload

Question

1 answers

solution1 0 ACCPTED 2012-08-08 16:37:40

solution1
0 ACCPTED 2012-08-08 16:37:40