Cannot read property style of null?

Question

I'm a quite new in javascript, and I'm trying to do a script to get a soft color change, bbut when a call the objetc to be changed, I got some problems. My code is this:

<script lenguage="javascript">
hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F") 
function convierteHexadecimal(num){ 
    var hexaDec = Math.floor(num/16) 
    var hexaUni = num - (hexaDec * 16) 
    return hexadecimal[hexaDec] + hexadecimal[hexaUni] 
}

function convierteHexadecimal(num){ 
    var hexaDec = Math.floor(num/16) 
    var hexaUni = num - (hexaDec * 16) 
    return hexadecimal[hexaDec] + hexadecimal[hexaUni] 
}

color_decimal=0

function degradado(){ 
    color_decimal ++ 
    color_hexadecimal = convierteHexadecimal(color_decimal) 
    document.getElementById("title").style.color = color_hexadecimal + color_hexadecimal + color_hexadecimal 

    //la llamo con un retardo 
    if (color_decimal < 255) 
        setTimeout("degradado()",1) 
}

degradado()

this is my code, but when I load it in chrome, an issue appears in:

document.getElementById("title").style.color

My h1 is:

<h1 align="center" id="title">Degradando...</h1> 

I notice the id is correctly write, So, what is the problem?

Answer 1

Try to do this:

window.onload = function(){
  document.getElementById("title").style.color
}

I think you are accessing the element even before it is created.

Answer 2

Call your function from the onload handler:

window.onload = function() {
    degradado();
}

so that it will run after the DOM is loaded.