當元素放在它之后時按鈕停止工作（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 創建了按鈕。

這是一種糟糕的做法，但它確實有效。