如何创建将用户选择的单词输入到madlibs故事中的madlibs页面

时间:2019-06-08 20:18:05

标签: javascript html button textbox element

任务需要这4件事。我已经创建了按钮和文本输入框以及基本的madlibs故事,但是还没有创建一种方法将键入到这些文本框中的单词插入madlibs故事。

  1. 具有5个或更多文本输入框

  2. 有一个按钮

  3. 单击按钮会生成一个故事

  4. 故事使用用户选择的单词

我是一个初学者,所以我基本上不知道自己在做什么,我需要这份作业来通过我的课程,否则我合法地不得不再做一年级但又不大。我已经尝试过自己做,但是遇到困难,需要一些帮助。我以前也没有使用过,如果格式不正确,请对不起。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>
      <ul>
        <li><input type = "text" id = "adj1" /><br>Adjective</li>
        <li><input type = "text" id = "noun1" /><br>Noun</li>
        <li><input type = "text" id = "verb1" /><br>Verb</li>
        <li><input type = "text" id = "noun2" /><br>Noun 2</li>
        <li><input type = "text" id = "noun3" /><br>Noun 3</li>
      </ul>
      <div>
        <button>Replace it!</button>
      </div>
    </div>
    <div id="story"></div>
    <script src="index.js"></script>
  </body>
</html>

// Javascript代码:

function replaceIt(){
  var storyDiv = document.getElementById("story");
  var adj1 = "<span class = 'replacement'>"+document.getElementById
("adj1").value+"</span>";
  var theStory="<h1>Douglas's Dance Party</h1>";
  theStory+="One "+adj1+" day,";

   storyDiv.innerHTML = theStory;
}
  1. 具有5个或更多文本输入框

  2. 有一个按钮

  3. 单击按钮会生成一个故事

  4. 故事使用用户选择的单词

0 个答案:

没有答案