¿A que se debe el error Uncaught TypeError: Cannot read property ‘addEventListener’ of null?

publicado por: Anonymous

Hola alguien podria porfavor explicarme porque me da este error en la linea:
btnInicia.addEventListener("click", tiempo);

Este es mi codigo de mi juego.js:

var canvas = document.getElementById("canvasAl");

var context= canvas.getContext("2d");
var segundos=0;
var minutos=0;
var m;
var seg;
var tiempoTotal;

var btnInicia = document.getElementById("inicia");
var btnPara = document.getElementById("parar");

btnInicia.addEventListener("click", tiempo);    
btnPara.addEventListener("click",ResetTiempo);
btnPara.disabled=true;
function tiempo(){
        btnInicia.disabled=true;
        btnPara.disabled=false;
        cronometro = setInterval(function(){
        context.clearRect(1100,0,1280,40);
        context.font="20pt Arial";
        segundos++;     
        //minutos=0;
        if (segundos >= 60) {
            minutos++;
            segundos = 0;
            }
        if(minutos < 10){           
            m= "0"+minutos;
            }
        else{
            m=minutos;
            }
        if(segundos<10){
            s="0"+segundos;
        }
        else{
            s=segundos;
        }
        tiempoTotal=m+":"+s;
        context.fillText("Tiempo: "+tiempoTotal,1100,30);       
    },1000) 

}
function ResetTiempo(){
    btnInicia.disabled=false;
    btnPara.disabled=true;
    m=0;
    s=0;
    segundos=0;
    minutos=0;
    context.clearRect(1100,0,1280,40);
    context.fillText("Tiempo: 00:00",1100,30);
    clearInterval(cronometro);
    console.log("Su tiempo fue de: "+tiempoTotal+" min.");
    alert("Su tiempo fue: "+tiempoTotal);
    tiempoTotal="";
    }

Y en mi HTML

    <div id="canvas" class="frame hidden">
    <center>
        <link rel="stylesheet" href="css/canvasEstilo.css">
    <canvas id="canvasAl" width="1280" height="400">
        No soportas canvas
    </canvas>
    <script src="js/juego.js"></script>
</center>
<div >
<center>
    <input type="button" id="inicia" class="botones" value="Comienza">
    <input type="button" id="parar" class="botones" value="Detener">
</center>
    <button onclick="game.setFrameVisible('main');game.setFrameHidden('canvas');">
      Volver al men&uacute;
    </button>
  </div>

solución

Intenta definiendo el script debajo del html y así esperar que se cargue el dom y luego acceder al button.

Aqui tu ejemplo funcionando:

_x000D_

_x000D_

var canvas = document.getElementById("canvasAl");_x000D_
_x000D_
var context= canvas.getContext("2d");_x000D_
var segundos=0;_x000D_
var minutos=0;_x000D_
var m;_x000D_
var seg;_x000D_
var tiempoTotal;_x000D_
_x000D_
var btnInicia = document.getElementById("inicia");_x000D_
var btnPara = document.getElementById("parar");_x000D_
_x000D_
btnInicia.addEventListener("click", tiempo);    _x000D_
btnPara.addEventListener("click",ResetTiempo);_x000D_
btnPara.disabled=true;_x000D_
function tiempo(){_x000D_
        btnInicia.disabled=true;_x000D_
        btnPara.disabled=false;_x000D_
        cronometro = setInterval(function(){_x000D_
        context.clearRect(300,0,1280,40);_x000D_
        context.font="20pt Arial";_x000D_
        segundos++;     _x000D_
        //minutos=0;_x000D_
        if (segundos >= 60) {_x000D_
            minutos++;_x000D_
            segundos = 0;_x000D_
            }_x000D_
        if(minutos < 10){           _x000D_
            m= "0"+minutos;_x000D_
            }_x000D_
        else{_x000D_
            m=minutos;_x000D_
            }_x000D_
        if(segundos<10){_x000D_
            s="0"+segundos;_x000D_
        }_x000D_
        else{_x000D_
            s=segundos;_x000D_
        }_x000D_
        tiempoTotal=m+":"+s;_x000D_
        context.fillText("Tiempo: "+tiempoTotal,300,30);       _x000D_
    },1000) _x000D_
_x000D_
}_x000D_
function ResetTiempo(){_x000D_
    btnInicia.disabled=false;_x000D_
    btnPara.disabled=true;_x000D_
    m=0;_x000D_
    s=0;_x000D_
    segundos=0;_x000D_
    minutos=0;_x000D_
    context.clearRect(1100,0,1280,40);_x000D_
    context.fillText("Tiempo: 00:00",1100,30);_x000D_
    clearInterval(cronometro);_x000D_
    console.log("Su tiempo fue de: "+tiempoTotal+" min.");_x000D_
    alert("Su tiempo fue: "+tiempoTotal);_x000D_
    tiempoTotal="";_x000D_
    }

_x000D_

canvas{_x000D_
background:#ccc;_x000D_
}

_x000D_

<div id="canvas" class="frame hidden">_x000D_
    <center>_x000D_
        <link rel="stylesheet" href="css/canvasEstilo.css">_x000D_
    <canvas id="canvasAl" width="1280" height="400">_x000D_
        No soportas canvas_x000D_
    </canvas>_x000D_
    <script src="js/juego.js"></script>_x000D_
</center>_x000D_
<div >_x000D_
<center>_x000D_
    <input type="button" id="inicia" class="botones" value="Comienza">_x000D_
    <input type="button" id="parar" class="botones" value="Detener">_x000D_
</center>_x000D_
    <button onclick="game.setFrameVisible('main');game.setFrameHidden('canvas');">_x000D_
      Volver al men&uacute;_x000D_
    </button>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *