当元素放在它之后时按钮停止工作（javascript）

Question

我正在尝试制作一个基于文本的空闲游戏，其中涉及多个按钮，以及围绕这些按钮的文本。

每当我尝试在“工作”按钮后放置文本时，它停止工作，单击时停止调用回调。

我尝试将文本放在单独的 div 中，但没有用，我还尝试将按钮放在自己的 div 中，这让事情变得更糟。 我尝试的最后一件事是将 write 函数编写的文本（这使得格式变得很糟糕）放在一个段落标签中，但不知何故也不起作用。

我不知道还能尝试什么。 到目前为止，唯一似乎没有打破它的是在它后面放置其他按钮。

我正在使用一个函数来创建名为createButton()按钮，它接受 3 个参数，按钮文本、按钮 ID 和按钮回调，并绘制文本我正在使用“自定义”写入函数（详细信息位于底部）。

对于工作按钮，我将work()函数作为回调传递。

创建按钮功能：

        function createButton(text, id, callback){
            // console.log(text + " " + id + " " + callback)

            var button = document.createElement("button");
            button.innerHTML = text; //create a button element

            //var body = document.getElementsByTagName("body")[0];
            gameDiv.appendChild(button); //set its parent to the game div

            button.addEventListener ("click", callback); //add the callback as a listener
        }

工作功能：

    function work(){
                money++;
                //TODO: find better way of updating money counter
                draw(); //redraw to update money counter
                if(stage == 1){ //increment the current stage if needed (for pacing)
                    stage = 2;
                    setTimeout(function(){
                        buttonStage = 1;
                        createButton("Buy Box", "buyBox", buyBox);
                    }, 1000);
                }
            }

绘制功能：

function draw(){
                clear(); //clear the screen
                for(var i=0;i<stage;i++){
                    switch(i){
                        case 0:
                            writeln("Do this");
                            writeln(" ​|");
                            writeln(" |");
                            writeln("▼");
                            createButton("Work", "work", work); //recreating a button every second might be a problem, but i dont know how to get it to position properly otherwise
                            break;
                        case 1:
                            write("<div id=\"stage2\">");
                            writelnDiv("<br><br>Money: " + Math.round((money*100)/100), "stage2");
                            writelnDiv("", "stage2");
                            writelnDiv("Now do this", "stage2");
                            writelnDiv(" ​|", "stage2");
                            writelnDiv(" |", "stage2");
                            writelnDiv("▼", "stage2");
                            write("</div>")
                            if(buttonStage > 0){
                                createButton("Buy Box", "buyBox", buyBox);
                            }
                            break;
                    }
                }
            }

write 、 writeDiv 、 writeln和writelnDiv函数都只是将文本添加到 div 的innerHTML。

所有代码都在这里： https : //js.do/Grimtin10/637778

解决方案可能很简单，但我不完全知道我在用 javascript 做什么。

如果需要更多信息来解决这个问题，我可以提供。

Answer 1

好吧，我想出了一个解决方案。

我没有使用document.createElement而是使用 HTML 标签直接将其附加到 div 创建了按钮。

这是一种糟糕的做法，但它确实有效。