javascript - Mad Libs下拉列表失败

当我制作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。为什么没有发生？

最佳答案

您所有的getElementById代码都在libIt()之外，因此在页面加载时它会获取表单的所有值，实际上忽略了您的选择。对于#story和＃lib-button没关系，但是＃teacher，＃gender和#person需要在函数顶部获取它们的值，因此单击按钮时可以获取更新的值。

关于javascript - Mad Libs下拉列表失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33870981/