按钮在其后放置元素时停止工作（javascript）答案

【问题标题】：Button stops working when elements are placed after it (javascript)按钮在其后放置元素时停止工作（javascript）
【发布时间】：2021-11-11 03:28:37
【问题描述】：

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

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

我尝试将文本放在单独的 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 做什么。

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

【问题讨论】：

标签： javascript html button

【解决方案1】：

好的，我想出了一个解决办法。

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

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

【讨论】：