javascript - 网页重置并停止应用 CSS

Question

我正在为类制作一个网页，其中包含使用 JavaScript 构建您自己的故事。一开始，用户输入他们的名字并选择他们的性别(点击代表性别的图像)，然后我使用 removeChild 使性别图像消失，并从一个不包括标题的新页面开始故事。但是一旦用户选择了性别，我应用的 CSS 似乎被网页忽略了——黑色背景变成白色，文本居中被忽略。为什么会这样，我如何才能让 CSS 在整个网页中保持一致，同时仍然执行我想执行的操作？

HTML:

var name = prompt("Welcome! To begin, please tell me your name:");
    var gender = 0;
    var maleImage = 0;
    var femaleImage = 0;
    var genderPrompt = 0;

    document.writeln("<h2>Hello " + name + "! Welcome to Design Your Own Story! " + 
                     "In this game, you pick how the story goes!</h2><h2 id='genderPrompt'>Let's begin. Click which gender you are.</h2>");

    document.writeln("<img id='maleImage' src='maleImage.jpg' alt='Male Image' onclick='genderChoice(1)' />");
    document.writeln("<img id='femaleImage' src='femaleImage.jpg' alt='Female Image' onclick='genderChoice(2)' />");

    function genderChoice(genderImage) {
        if (genderImage === 1) {
            gender = "male";
        } else {
            gender = "female";
        }
        setTimeout(genderReset,250);

    }

    function genderReset() {
        if (gender === "female") {  
            maleImage = document.getElementById("maleImage");
            maleImage.parentNode.removeChild(maleImage);
        }
        if (gender === "male") {
            femaleImage = document.getElementById("femaleImage");
            femaleImage.parentNode.removeChild(femaleImage);
        }
        genderPrompt = document.getElementById("genderPrompt");
        genderPrompt.parentNode.removeChild(genderPrompt);

        document.writeln("<h1 class='title'>Design Your Own Story</h1>");
        document.writeln("<h2>Ok, " + name + ", so you're " + gender + "! Let's start our journey...</h2>");
        setTimeout(leavesHome,1500);
    }

CSS:

* {
    background-color:black;
    color:white;
    text-align:center;
}

img {
    width:30%;
}

Answer 1

javascript 无法识别 genderCoice 函数。您可能正在闭包中运行代码。

尝试将它分配给一个对象(我以 document 为例，尽管这不一定是最佳实践):

document.genderChoice = function(genderImage) {
    if (genderImage === 1) {
        gender = "male";
    } else {
        gender = "female";
    }
    setTimeout(genderReset,250);

}

参见 this在职的。( fiddle 本身坏了，可能是因为writeln，无法进一步编辑)