用 E4X 和 Prototype 创建 Ajax mindreader 应用程序，第 2 部分: 使 mindreader 应用程序更智能化

清单 3. 获得新目标

function　get_new_target(){　
　　　document.getElementById("guessDiv").style.visibility　=　"hidden"　;　
　　　document.getElementById("targetFormDiv").style.visibility　=　"visible"　;　
}　

结果是图 1 所示的新目标表单。

图 1. 新目标表单

在框中输入一个新项（比如 “a lion”）并单击 Teach me!，它就会运行 submit_new_target() 函数，见清单 4。

清单 4. 提交新目标

...　
　　　show_form("targetFormDiv");　
}　
　
var　newTarget;　
function　submit_new_target(){　
　　　
　　newTarget　=　document.getElementById("targetForm").elements[0].value;　
　　　
　　document.getElementById("newTarget").innerHTML　=　newTarget;　
　　document.getElementById("oldTarget").innerHTML　=　currentGuessText;　
　　　
　　hide_form("targetFormDiv");　
　　show_form("answerFormDiv");　　　
}　
　
function　hide_form(divName){　
...　

注意，这里声明了 newTarget，所以在从表单获得新目标之后可以使用它。然后在 answerFormDiv 中设置这一信息（见清单 5）并显示它。

清单 5. answerFormDiv

<div　id="answerFormDiv"　style="position:　absolute;　top:　50px;　
　　　　　　　　　　　　　　　　visibility:　hidden;　width:　100%;">　
　
　　<form　id="answerForm"　name="answerForm"　>　
　　　What　question　distinguishes　<span　id="newTarget"></span>　
　　　from　<span　id="oldTarget"></span>?<br　/>　
　
　　<input　type="text"　name="newQuestion"　value=""　id="newQuestion"　/><br　/>　
　
　　　What　is　the　correct　answer　for　this　item?　
　　　<select　id="newAnswer"　name="newAnswer">　
　　　　　<option　value="Yes">Yes</option>　
　　　　　<option　value="No">No</option>　
　　　</select>　
　　　<input　type="button"　value="Add　Question"　　/>　
　　</form>　
　
</div>　

编缉推荐阅读以下文章

• 用 E4X 和 Prototype 创建 Ajax mindreader 应用程序，第 1 部分: 构建 Twenty Questions 基础结构