I have a script that will loop through each input and textarea field on a page and set onfocus and onblur events to change the background colour.

Here is some of the code that does it

                                elementInput[j].onfocus = active;
                                elementInput[j].onblur = deActive;
                                elementInput[j].onload = deActive;

Here are the functions that are called to do this:

// makes a text field turn white on hover
function active ()
    {
        var field = document.getElementById (this.id);
        field.style.backgroundColor="#FFF";
    }
    
// makes a text field turn light grey on blur
function deActive ()
    {
        var field = document.getElementById (this.id);
        field.style.backgroundColor="#F9F9F9";
    }

However, the

elementInput[j].onload = deActive;

Part of the code does not work. It doesnt create an error, but it just doesn't do anything! Its supposed to make all the input fields turn grey using the deActive function, but nothing seems to happen?

Originally Posted by KkillgasmM

I have a script that will loop through each input and textarea field on a page and set onfocus and onblur events to change the background colour.

Here is some of the code that does it

                                elementInput[j].onfocus = active;
                                elementInput[j].onblur = deActive;
                                elementInput[j].onload = deActive;

Here are the functions that are called to do this:

// makes a text field turn white on hover
function active ()
    {
        var field = document.getElementById (this.id);
        field.style.backgroundColor="#FFF";
    }
    
// makes a text field turn light grey on blur
function deActive ()
    {
        var field = document.getElementById (this.id);
        field.style.backgroundColor="#F9F9F9";
    }

However, the

elementInput[j].onload = deActive;

Part of the code does not work. It doesnt create an error, but it just doesn't do anything! Its supposed to make all the input fields turn grey using the deActive function, but nothing seems to happen?

My understanding is that the onload event is only valid on certain elements, such as body, img, and iframe (i.e., elements that need to be loaded). I don't think onload would work on an input field.

If you are trying to make the default background-color of that element to be a certain color, then it is better to set it in the CSS than JavaScript.

input fields and textareas are NOT created by HTML. They are created by the underlying OS of the client browser and as such "on the fly" style changes will often have no effect.

use document.form.element.disabled = true|false and let the OS take care of the input state

Originally Posted by frost

If you are trying to make the default background-color of that element to be a certain color, then it is better to set it in the CSS than JavaScript.

Yeah I basically set the CSS to make the fields white, that is how I want them to look if JavaScript is disabled. If it is enabled however, it makes them all grey (or is supposed to!) then makes them white when focused. Thanks anyway!

Originally Posted by chrishirst

use document.form.element.disabled = true|false and let the OS take care of the input state

Thanks but I don't really have any idea what you mean. What would the 'disabled' part of the code do? Is there any way I could assign the function to the form element similar to how Ive tried already? hmmmmmm!

What would the 'disabled' part of the code do?

setting the disabled property of a form element to true, is the equivalent of using disabled="disabled" in HTML source
It will "grey it out" and stop it receiving focus.

Is there any way I could assign the function to the form element similar to how Ive tried already

Yep, just make your active / inactive functions set the disabled property instead of the style.backgroundColor property.