What is the reason for the error Uncaught TypeError: Can not read property 'addEventListener' of null?

Question

What is the reason for the error Uncaught TypeError: Can not read property 'addEventListener' of null?

Navigation

#1 by (1 votes)

2

Hello, could someone please explain me because I get this error in the line: btnInicia.addEventListener("click", tiempo);

This is my code for my 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="";
    }

And in my 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>

javascript html

asked by Pedro Robles 22.03.2018 в 04:32

source

1 answer

Create invoice number in java Relate twig template with php controller in symfony

score 1 · Accepted Answer

Try defining the script below the html and wait for the sun to load and then access the button.

Here is your working example:

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(300,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,300,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="";
    }

canvas{
background:#ccc;
}

<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>