For my game project, I need to create an 8x8 table where multiple coins are displayed simultaneously for 3000 milliseconds at random positions. When the "Start" button is clicked, the coin display should continue for 1 minute. However, I am facing an issue with a random function that is generating images on different positions. The error message "appendChild undefined" keeps popping up and I cannot figure out why. I want the image to be displayed randomly across the table without any specific order. Here is the code snippet I have been working on:
PS: I am new to JS and still learning, so please bear with any mistakes in my code.
var tbl = document.createElement('table');
var tr = tbl.insertRow();
var td = tr.insertCell();
var div = document.createElement('div');
div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image">';
var img = document.getElementById("coin_image");
function tableCreate() {
// Table creation logic here
}
function onTimer() {
// Timer logic here
}
function onRestart() {
// Restart logic here
}
.button_class {
float: left;
display: inline-block;
width: 400px;
}
.btn {
width: 140px;
height: 50px;
margin: 20px;
font-size: 16px;
background-color:
}
.coin_img {
width: 100%;
height: 70px;
display: none;
}
.counter_div {
margin-left: 20px;
}
<body onload="tableCreate()">
<div class="button_class">
<button type="button" name="start_button" class="start_button btn" id="st_button" onclick="onTimer()">Start</button>
<button type="button" name="restart_button" class="restart_button btn" id="rs_button" onclick="onRestart()">Restart</button>
<div class="counter_div" id="counter">
<h1>Total Time:-1:00</h1>
</div>
</div>
</body>