Как создать веб-страницу madlibs, которая вводит выбранные пользователем слова в историю madlibs - PullRequest
Новая
       31

Как создать веб-страницу madlibs, которая вводит выбранные пользователем слова в историю madlibs

0 голосов
/ 08 июня 2019

Для выполнения задания требуются 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. история использует слова, которые пользователь выбрал

...