当我多次调用我的函数时，为什么不重新显示我的div？

Question

我最近遇到了一个问题，当我点击它们并显示一系列问题时，让按钮响应。我已经解决了这个问题，但现在我还有另一个棘手的问题。

当我加载我的程序时，一切看起来都是正确的......它显示了我的绿松石背景，自定义按钮和框等等。但是当我调用onclick函数并重新加载页面时，下一个问题，没有格式化出现...它只是白色背景上的黑色文本与计划灰色按钮。

为什么不在后续函数调用中显示div，如何更改代码以便它们执行？

        var i = 0;
        display(0);

        // display questions
        function display(i) {
            var prg_string;
            for (var j = 0; j < progress.length; j++) prg_string += progress[j];
            document.body.innerHTML = "";
            document.write(
                "<div id = 'background'>"
                    + "<div id = 'progress'>" + progress + "</div>"
                    + "<div id = 'title'>-Test v1-<br></br>" + tower + "</div>"
                    + "<div id = 'question'>" + questions[i].text + "</div>"
                    + "<div id = 'stats'>Level " + level + "/" + total_levels + " Question " + (i + 1) + "/" + questions.length + "</div>"
                + "</div>"
            );

            document.write("<button id = 'answer1' onclick = 'next(questions[i].answers[0].correct)'>" + questions[i].answers[0].text + "</button>");
            if (questions[i].answers.length > 0)
                document.write("<button id = 'answer2' onclick = 'next(questions[i].answers[1].correct)'>" + questions[i].answers[1].text + "</button>");
            if (questions[i].answers.length > 1)
                document.write("<button id = 'answer3' onclick = 'next(questions[i].answers[2].correct)'>" + questions[i].answers[2].text + "</button>");
            if (questions[i].answers.length > 2)
                document.write("<button id = 'answer4' onclick = 'next(questions[i].answers[3].correct)'>" + questions[i].answers[3].text + "</button>");
        }

        // go to next question, marking whether answer was right or wrong
        function next(correct) {
            if(correct) progress[i] = "T";
            else progress[i] = "F";
            i += 1;
            display(i);
        }