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>

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 + " , он...