Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the events unfolded.
However, I've run into an unusual issue- for some reason, I can't seem to change the innerHTML of the mainWindow div, which is something I've never had trouble with before.
Although the code doesn't throw any errors, when I inspect the webpage in my browser, the mainWindow div appears empty even though the crab object functions correctly.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Crabs!</title>
<head>
<script>
(REMOVED FOR BREVITY)
</script>
<style> body { background-color: rgb(0, 128, 200); } </style>
</head>
<body>
<div id="foundation" style="height:100%; width:100%; border: 0px white solid;">
<div id="mainWindow" style="height:768px; width:1024px; border: 2px black solid; background-color: rgb(255, 250, 175);">
</div>
<button id="btnStart" onclick="startstop()">START</button><br/><br/>
<span style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 24pt; color: white;"> Crabs on the island. </span>
</div>
</body>
</html>