通过 getElementById().innerHTML 编辑 div 没有任何变化

Question

我正在尝试制作一个简单的 JS "game"，它基于我在高中读到的一个关于小岛上的机器人螃蟹的短篇小说。它或多或少是一个模拟器，玩家可以在其中设置初始参数，然后点击开始并观察一切展开。

我的问题是我似乎无法更改 mainWindow 的 innerHTML div——这是我以前从未真正遇到过的问题。

代码没有抛出任何错误，但是当我在浏览器中打开检查器时，它显示主窗口 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>

Answer 1

在关闭附加内容样式

之前，您漏掉了引号 '

  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>

通过 getElementById().innerHTML 编辑 div 没有任何变化

Editing of div via getElementById().innerHTML provides no change

html

javascript

css

2d-games