7

Estoy haciendo una ejercicio de simulación básica de cajero.

me da el siguiente error al momento de ejecutar el código, no he podido encontrar el error.

Cannot read property 'addEventListener'

Agradeceré mucho su orientación, Gracias!

JS:

class billete{
constructor(v,c){
    this.valor=v;
    this.cantidad=c;
}
}
function entregarDinero()
{
for(var bi of caja)
{
    console.log(bi);
}
}

var caja=[];
var entregado=[];
caja.push(new billete(50,3));
caja.push(new billete(20,2));
caja.push(new billete(10,2));

var dinero=210;
var div=0;
var papeles=0;

var b=document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

HTML

<!DOCTYPE html>
<html>
<head>
<title>Cajero</title>
</head>
<body>
<h1>Mi primer cajero!</h1>
<p> wow! :O </p>
<img src="cajero.webp">
</br>
<script src="cajero.js"></script>
<input type="number" id="dinero">
 <input type="button" value="Extraer" id="extraer" />
</body>
</html>
1
  • A mi me funciona bien tu codigo.
    – alanfcm
    el 4 oct. 2018 a las 18:03

1 respuesta 1

5

He probado tu código y es totalmente funcional, el único detalle que pudieras tener es donde estas escribiendo el JS; te comento que tu código debería tener este orden

INDICACIONES

1.- Donde como puedes notar primero hago la declaración del HTML
2.- Después escribo el JS, por que si hago la lógica antes, entonces la sentencia donde obtienes al botón por su id, nunca lo va a encontrar por que en ese momento aún no existe en el árbol DOM 3.- El error Cannot read property 'addEventListener' es por que cuando se ejecuta ese bloque de código aun no existe ese nodo, entonces lo mas seguro es que tienes primero el JS y luego el HTML declarado

CÓDIGO FUNCIONAL

<!DOCTYPE html>
<html>
<head>
<title>Cajero</title>
</head>
<body>
<h1>Mi primer cajero!</h1>
<p> wow! :O </p>
<img src="cajero.webp">
</br>
<script src="cajero.js"></script>
<input type="number" id="dinero">
 <input type="button" value="Extraer" id="extraer" />
</body>
<script>
class billete{
constructor(v,c){
    this.valor=v;
    this.cantidad=c;
}
}
function entregarDinero()
{
for(var bi of caja)
{
    console.log(bi);
}
}

var caja=[];
var entregado=[];
caja.push(new billete(50,3));
caja.push(new billete(20,2));
caja.push(new billete(10,2));

var dinero=210;
var div=0;
var papeles=0;

var b=document.getElementById("extraer");
b.addEventListener("click", entregarDinero);
</script>
</html>

1
  • muchas gracias, ya me estaba inventando teorías raras, pensaba que era por el evento onload, algo así como que era un void o constructor, para crear eventos se tenia que anidar, Tenías razón solo era cambiar el linck al final del boddy, un error muy de novato (ya me había pasado y se me olvido)
    – n33
    el 3 feb. 2020 a las 18:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.