我正在尝试根据我在高中读到的一个短篇小说制作一个简单的 JS“游戏”，该短篇小说涉及一个小岛上的机器人螃蟹。它将或多或少成为一个模拟器，玩家可以在其中设置初始参数，然后点击开始并观看一切展开。
我的问题是我似乎无法更改 mainWindow div 的 innerHTML — 这是我以前从未真正遇到过的问题。
代码没有抛出任何错误，但是当我在浏览器中打开检查器时，它显示 mainWindow div 只是空的，尽管 crab 对象本身正在按预期工作。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crabs!</title>
<head>
<script>
var theCrabs = [new crab(12, 12, new Vector2(512, 384), "alive")];
var numCrabs = 2;
var islandSizeX = 1024;
var islandSizeY = 768;
var theTime = new clock(12, 0, 0);
var fps = 60;
var go = false;
function Vector2 (_x, _y)
{
this.x = Number(_x);
this.y = Number(_y);
}
function crab (_size, _speedmax, _position, _status = "alive")
{
this.size = _size;
this.speedmax = _speedmax;
this.speed = new Vector2(0, 0)
this.position = _position;
this.target = new Vector2(0, this.position.y)
this.status = _status;
this.xMoment = 0;
this.yMoment = 0;
this.Move = function (_murder = false) {
if (this.status == "alive") {
if (this.position.x > this.target.x) {
this.speed.x = this.speedmax * -1;
} else if (this.position.x < this.target.x) {
this.speed.x = this.speedmax;
} else {
this.speed.x = 0;
}
if (this.position.y > this.target.y) {
this.speed.y = this.speedmax * -1;
} else if (this.position.y < this.target.y) {
this.speed.y = this.speedmax;
} else {
this.speed.y = 0;
}
this.position.x += this.speed.x;
this.position.y += this.speed.y;
}
if (this.position.x < 0) {
this.position.x = 0;
this.target.x = islandSizeX;
}
if (this.position.x > (islandSizeX - this.size)) {
this.position = (this.islandSizeX - this.size);
this.target.x = 0;
}
if (this.position.y < 0) { this.position.y = 0; }
if (this.position.y > (islandSizeY - this.size)) { this.position = (this.islandSizeY - this.size); }
}
this.getColorByStatus = function () {
(REMOVED FOR BREVITY)
}
}
function draw ()
{
//clear the window
document.getElementById("mainWindow").innerHTML = "";
//draw clock
document.getElementById("mainWindow").innerHTML += "<div style='position:relative; left:10px; top:10px; color:black;>" + theTime.getTime() + "</div>";
//draw crabs
for (var i=0; i<theCrabs.length; i++) {
currentCrab = theCrabs[i];
document.getElementById("mainWindow").innerHTML += "<div style='width:" + currentCrab.size + "; height:" + currentCrab.size + "; position:relative; left:" + currentCrab.position.x + "px; top:" + currentCrab.position.y + "px; background-color:" + "rgb(200, 90, 110)" + ";></div>";
}
}
function clock (_h, _m, _s)
{
(REMOVED FOR BREVITY)
}
function tick ()
{
if (go) {
for (var i=0; i<theCrabs.length; i++) {
theCrabs[i].Move();
}
theTime.addTime(0, 0, 10);
draw();
}
}
function FPS () { return Math.round(1000 / fps); }
function startstop()
{
if (!go) {
go = true;
document.getElementById("btnStart").innerHTML = "STOP";
setInterval(tick, FPS());
} else {
go = false;
document.getElementById("btnStart").innerHTML = "START";
clearInterval(tick);
}
}
</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>
最佳答案
您错过了一个报价'在关闭附加内容样式之前
document.getElementById("mainWindow").innerHTML += "<div style='position:relative; left:10px; top:10px; color:black;'>" + theTime.getTime(+ "</div>";
在color:black;'之后添加即可还有... + "rgb(200, 90, 110)" + ";'></div>";
为避免任何其他问题，请尝试添加 async属性为 script标签，使用
document.querySelector("#mainWindow").innerHTML="you content ..."或删除脚本内容并将其放置在关闭 body 之前标记
</body>
...
<script>
<!--your script-->
</script>
</body>
关于javascript - 通过 getElementById().innerHTML 编辑 div 没有任何变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52194666/