Estoy tratando de generar una imagen usando coordenadas específicas en HTML
class Car { constructor(id, image, vPosition, wins, hPosition, finishedRace) { //there is a chance I may need to remove the last 3 parms (wins,hpos and finished race) this.id = id; this.image = image; this.vPosition = vPosition; this.hPosition = hPosition; this.finishedRace = finishedRace; this.wins = wins; }Ese es mi constructor de coche de objetos (no estoy publicando getters y setters ya que funcionan bien y no son relevantes para mi problema)
draw() { return "<img id='"+this.id+"' src='"+this.image+"' width='250px' style='position: absolute; left: "+this.hPosition+"px; top: "+this.vPosition+"px;' />"; }ese es mi método de dibujo que planeo usar para dibujar objetos de automóviles en HTML
testFunction(); function testFunction() { document.getElementById("1").innerHTML = car1.draw(); };Esta es una función de prueba en la que estoy tratando de representar el primer objeto de automóvil en HTML pero no funciona (todo esto está envuelto en window.onload)
<body> <h1><b>Race</b></h1> <p> <input id="startRace" type="button" value="Start Race" /> <input id="resetRace" type="button" value="Reset Race" /> <input id="viewStats" type="button" value="View Statistics" /> </p> <div class="1"> </div> <div class="vl"></div> --> </div>Ese es mi código HTML. El error que recibo es: TypeError no detectado: no se pueden establecer propiedades de nulo (estableciendo 'innerHTML')