JavaScript MadLib游戏-无法在提交时调用函数
JavaScript MadLib游戏-无法在提交时调用函数
提问于 2014-05-05 19:37:47
我正在尝试完成一个简单的练习，以测试我在处理表单输入元素方面的JavaScript技能。这个游戏的目标是从表单输入元素中检索当前值，从它们生成一个故事，并在“故事”div中输出该故事。然而，当我点击“Lib It！”按钮，则不会调用该函数，也不会替换文本。有什么想法可以解释为什么这种情况没有发生吗？
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Mad Libs</h1>
<ul>
<li>Noun: <input type="text" id="noun">
<li>Adjective: <input type="text" id="adjective">
<li>Someone's Name: <input type="text" id="person">
</ul>
<button id="lib-button" onclick="makeMadLib">Lib it!</button>
<div id="story">Placeholder Text</div>
<script type="text/javascript" src="exercises.js"></script>
</body>
</html>JavaScript：
function makeMadLib(){
var noun = document.getElementById("noun").value;
var adjective = document.getElementById("adjective").value;
var person = document.getElementById("person").value;
var story = document.getElementById(story);
story.firstChild.nodeValue = person + "likes taking photographs of" + adjective + noun;
}谢谢,
罗伯特
伦敦，英国
回答 1
Stack Overflow用户
发布于 2014-05-05 19:51:51
首先，我们在调用madLib函数时忘记了使用括号。将onclick="makeMadLib"更改为onclick="makeMadLib()"。然后，在madlib函数中，我们需要在document.getElementById()：var story = document.getElementById("story");中的story两边添加引号。最后，要输出文本，我们所要做的就是使用innerHTML。
HTML
...
<button id="lib-button" onclick="makeMadLib()">Lib it!</button>
...JS
...
var story = document.getElementById("story");
....
story.innerHTML = person + " likes taking photographs of " + adjective + " " + noun;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23471509
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号