疯狂Libs下拉列表Faliure

Question

当我制作Mad Libs游戏时，我去了一个他/她的角色。但后来这个名字是用户生成的，所以我不能选择任何一个。所以，我做了这个：

var libButton = document.getElementById("lib-button");
var storyDiv = document.getElementById("story");
var teacher = document.getElementById("teacher");
var person = document.getElementById("person");
var gender = document.getElementById("gender").value;
var libIt = function() {
    if (gender === "xxx") {
        heShe = "He/she";
    }
    else if (gender === "male") {
        heShe = "He";
    }
    else if (gender === "female") {
        heShe = "She";
    }
    
    // The story!
    storyDiv.innerHTML = "Your story: At the beginning, " + person.value + " hated graphs. " + heShe + " just didn't get the hang of it. Then, " + teacher.value + " told " + person.value + " about the uses of graphs. " + person.value + " started to see how graphs are useful, therefore linking the outside life to graphs. Now, " + person.value + " knew why they are learning graphs, and started to get the hang of it. The end.";
};
libButton.addEventListener('click', libIt);

<ul>
    <li>Teacher's Name: <input type="text" id="teacher"></li>
    <li>Someone's Name: <input type="text" id="person"></li>
    <li>
        <label>Gender of that person
            <select id="gender">
                <option value = "xxx">---</option>
                <option value = "male">Male</option>
                <option value = "female">Female</option>
            </select>
        </label>
    </li>
</ul>
<button id="lib-button">Lib it!</button>

但是，出于某种原因，在cloud9中，当涉及到他/她部分时，它总是显示heShe，即使下拉列表位于"男性"或"女性"。我希望它是，如果下拉菜单在"男性"，那么它会显示He，当它在"女性"时，它会显示She，当它处于"---"时，就会显示He/she。为什么没有发生这种事？

Answer 1

所有的getElementById代码都在libIt()之外，因此在加载页面时，它会获取表单的所有值，基本上忽略了您的选择。对于#story和#lib按钮，这并不重要，但#tear、#gender和#person需要在函数顶部获取它们的值，因此您可以在单击按钮时获得更新的值。