How to set CSS value with JavaScript?

Question

I want to change the background color of an HTML element whose ID is foo. I have this code at present:

var hexcode = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');

// this chooses a random value from the array hexcode
var ranval = function() {
    return hexcode[Math.floor(Math.random()*hexcode.length)];
}

// six ranval() are put together to get color
var colorname = "#" + ranval() + ranval() + ranval() + ranval() + ranval() + ranval();

// trying to put the value on the background of element with "foo" ID.
document.getElementById("foo").style.color = colorname;

This code is throwing this error:

Uncaught TypeError: Cannot read property 'style' of null

I'm sure that ID foo exists.

Are you positive? Where is your <script> tag (before or after the body)? — Blender
– Blender, Commented Jan 7, 2013 at 2:22
Not related to the error, but if you need to change the background color you should use style.backgroundColor instead of style.color. — VLS
– VLS, Commented Jan 7, 2013 at 2:36

Blender · Accepted Answer · 2013-01-07 02:45:14Z

4

Your error occurs because you're trying to access your element before the DOM is ready. Wait for the window to load before accessing it:

// Credit: http://paulirish.com/2009/random-hex-color-code-snippets/

function random_color() {
    return '#' + ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6);
}

window.onload = function() {
    document.getElementById("foo").style.backgroundColor = random_color();
};

Demo: http://jsfiddle.net/Blender/xQure/1/

edited Jan 7, 2013 at 2:45

answered Jan 7, 2013 at 2:26

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Gabriel Gartz Over a year ago

Your script will have errors @Blender, because if you get a number less then 6 characters the color wont change or changes wrong.

Blender Over a year ago

@SantoshKumar: Sorry, load should be onload.

Gabriel Gartz Over a year ago

@Blender still with the same problem, will not aways have 6 characters. You can complete it using RegExp, or use another like solution like what I did.

Santosh Kumar Over a year ago

What if I want to change background color of body?

Gabriel Gartz Over a year ago

@SantoshKumar Use document.body.style.backgroundColor = random_color() on the onload callback

|

Gabriel Gartz · Accepted Answer · 2013-01-07 02:53:37Z

The simple way to fix your code is:

var random_color = function() {
    function randomHex() {
        return Math.floor(Math.random() * 15).toString(16);
    }
    var str = '#';
    for(var i = 6; i--;) {
        str += randomHex();
    }
    return str;
}


window.onload = function() {
    // For your body background color
    document.body.style.backgroundColor = random_color();

    // For your foo element TEXT color
    document.getElementById("foo").style.color = random_color();

    // For your foo element BACKGROUND color
    document.getElementById("foo").style.backgroundColor = random_color();
};

Collectives™ on Stack Overflow

How to set CSS value with JavaScript?

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related