2

ID が の HTML 要素の背景色を変更したいfoo。私は現在このコードを持っています:

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;

このコードはこのエラーをスローしています:

Uncaught TypeError: Cannot read property 'style' of null

fooIDが存在することは確かです。

4

2 に答える 2

4

DOM の準備が整う前に要素にアクセスしようとすると、エラーが発生します。ウィンドウにアクセスする前に、ウィンドウがロードされるのを待ちます。

// 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();
};

デモ: http://jsfiddle.net/Blender/xQure/1/

于 2013-01-07T02:26:24.217 に答える
2

コードを修正する簡単な方法は次のとおりです。

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();
};
于 2013-01-07T02:38:54.900 に答える