当元素放置在按钮之后时，按钮停止工作(javascript)

Question

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

每当我试图将文本放在“工作”按钮之后时，它就会停止工作，并在单击时停止调用回调。

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

我不知道还能试什么。到目前为止，唯一看起来没有打破它的是在它后面添加其他按钮。

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

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

createButton函数：

        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中。

这是一种可怕的方式，但它是有效的。