Question

我正在尝试完成一个简单的练习来测试我在处理表单中的输入元素时的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;
}

谢谢，

罗伯特

伦敦，英国

Answer 1

首先，我们忘记在调用madLib函数时使用括号。将onclick="makeMadLib"更改为onclick="makeMadLib()"。然后在我们的madlib函数中，我们需要在story：document.getElementById()中的var story = document.getElementById("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;

JavaScript MadLib游戏 - 无法在提交时调用函数

1 个答案: