words game

by Kanatantsin

HTML

<div id=inputWords>
    <ul>
      <li><input type="text" id="adj1" /><br>Прилагательное</li>
      <li><input type="text" id="verbIng" /><br>Глагол прошедшего времени</li>
      <li><input type="text" id="roomInHouse" /><br>Комната в доме</li>
      <li><input type="text" id="color" /><br>Цвет</li>
      <li><input type="text" id="nounPlural" /><br>Существительное во множественном числе</li>
      <li><input type="text" id="pastVerb" /><br>Глагол прошедшего времени</li>
      <li><input type="text" id="beverage" /><br>Напиток</li>
      <li><input type="text" id="musicType" /><br>Тип музыки</li>
      <li><input type="text" id="diffRoom" /><br>Другая комната в доме</li>
      <li><input type="text" id="exclamation" /><br>Восклицание!</li>
      <li><input type="text" id="pastVerb2" /><br>Глагол прошедешго времени</li>
      <li><input type="text" id="adjDance" /><br>Прилагательное</li>
      <li><input type="text" id="animal" /><br>Название животного</li>
      <li><input type="text" id="city" /><br>Название города</li>
      <li><input type="text" id="verb" /><br>Движение</li>
    </ul>
    <div id=buttonDiv>
      <button id=replaceButton>Подставить это!</button>
    </div>
  </div>

  <div id=story></div>


<!--div id="inputWords">
    <ul>
        <li><input type="text" id="adj1" /><br>Adjective</li>
        <li><input type="text" id="verbIng" /><br>Verb (ending in "-ing")</li>
        <li><input type="text" id="roomInHouse" /><br>Room in a house</li>
        <li><input type="text" id="color" /><br>Color</li>
        <li><input type="text" id="nounPlural" /><br>Plural noun</li>
        <li><input type="text" id="pastVerb" /><br>Verb (past tense)</li>
        <li><input type="text" id="beverage" /><br>Beverage</li>
        <li><input type="text" id="musicType" /><br>Type of music</li>  
        <li><input type="text" id="diffRoom" /><br>Different Room in a house</li>
        <li><input type="text" id="exclamation" /><br>Exclamation</li> 
        <li><input...

CSS

body {
  font-family: "Comic Sans MS";
}

#inputWords {
  float: left;
  width: 45%;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  line-height: 2em;
  text-transform: uppercase;
  margin-top: 8px;
}

input[type=text] {
  border-width: 0 0 1px 0;
  border-color: #333;
}

#buttonDiv {
  text-align: center;
}

#replaceButton {
  margin-top: 30px;
  width: 200px;
}

#story {
  margin-top: 12px;
  width: 45%;
  border: 1px dashed blue;
  padding: 8px;
  float: left;
}

.replacement {
  text-decoration: underline;
  text-transform: uppercase;
}

JavaScript

var replaceButton = document.getElementById("replacebutton");
replaceButton.addEventListener("click", replaceIt);

function replaceIt() {
  var storyDiv = document.getElementById("story");

var adj1 = "<span class='replacement'>" + document.getElementById("adj1").value + "</span>";
var verbIng = "<span class='replacement'>" + document.getElementById("verbIng").value + "</span>";
var roomInHouse = "<span class='replacement'>" + document.getElementById("roomInHouse").value + "</span>";
var color = "<span class='replacement'>" + document.getElementById("color").value + "</span>";
var nounPlural = "<span class='replacement'>" + document.getElementById("nounPlural").value + "</span>";
var pastVerb = "<span class='replacement'>" + document.getElementById("pastVerb").value + "</span>";
var beverage = "<span class='replacement'>" + document.getElementById("beverage").value + "</span>";
var musicType = "<span class='replacement'>" + document.getElementById("musicType").value + "</span>";
var diffRoom = "<span class='replacement'>" + document.getElementById("diffRoom").value + "</span>";
var exclamation = "<span class='replacement'>" + document.getElementById("exclamation").value + "</span>";
var pastVerb2 = "<span class='replacement'>" + document.getElementById("pastVerb2").value + "</span>";
var adjDance = "<span class='replacement'>" + document.getElementById("adjDance").value + "</span>";
var animal = "<span class='replacement'>" + document.getElementById("animal").value + "</span>";
var city = "<span class='replacement'>" + document.getElementById("city").value + "</span>";
var verb = "<span class='replacement'>" + document.getElementById("verb").value + "</span>";

var theStory;

theStory = "<h1>Танцевальная вечеринка Дугласа</h1>"

theStory += "<p>Одним " + adj1 + " днем Дуглас " + verbIng + " в своей " + roomInHouse + ", читая книгу о " + color + nounPlural + "</p><p>. Когда он " + pastVerb + " свой " + beverage + " , он услышал " + musicType + " , играющую в " +...