I am trying to generate image using specific coordinates on 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;
}
Thats my constructor of object car (I am not posting getters and setters since they work fine and are not relevant to my problem)
draw() {
return "<img id='"+this.id+"' src='"+this.image+"' width='250px' style='position: absolute; left: "+this.hPosition+"px; top: "+this.vPosition+"px;' />";
}
that is my draw method which I plan to use to draw car objects to HTML
testFunction();
function testFunction() {
document.getElementById("1").innerHTML = car1.draw();
};
This is test function where I am trying to render the first car object on HTML but that doesn't work (all of this is wrapped under 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>
Thats my HTML code. The error i get is : Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')