Mad Libs下拉列表失败

Question

When I was making a Mad Libs game, I went to a part that was he/she. But then the name was user-generated, so I can't choose either one. So, I did this:

 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> 

But then, for some reason, in cloud9, when it gets to the he/she part,it always shows heShe , even when the drop-down list is at "Male" or "Female". I want it to be if the drop-down menu is at "Male", then it says He , and when it's at "Female", It says She , and when it's at "---", then it says He/she . Why doesn't that happen?

Answer 1

All of your getElementById code is outside of libIt() so it is grabbing all the values of the form when the page loads, essentially ignoring your choices. For #story and #lib-button it doesn't matter, but #teacher, #gender, and #person need their values fetched at the top of the function, so you get the updated values at the time you clicked the button.