Mad Libs в JavaScript - Dom Event
Я не уверен, что я делаю неправильно. Я беру 3 входа: существительное, прилагательное и человек. Я продолжаю получать: "Сгенерированный рассказ: я взял своего кота и поиграл в него. [Объект HTMLInputElement] не понравился". Я использую имя var со значением, так же как и в других строках \pbjects.
Что мне не хватает?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Challenge: Mad Libs</title>
</head>
<body>
<h1>Mad Libs</h1>
<ul>
<li>Noun: <input type="text" id="noun" /></li>
<li>Adjective: <input type="text" id="adjective" /></li>
<li>Someone's Name: <input type="text" id="person" /></li>
</ul>
<button id="lib-button">Lib it!</button>
<p>Generated story: <span id="story"></span></p>
<script>
var libButton = document.getElementById("lib-button");
var libIt = function() {
var storyDiv = document.getElementById("story");
var noun = document.getElementById("noun").value;
var adjective = document.getElementById("adjective").value;
var name = document.getElementById("person").value;
storyDiv.innerHTML =
"I took my " +
noun +
" and " +
adjective +
" it. " +
person +
" didn't like it.";
};
libButton.addEventListener("click", libIt);
</script>
</body>
</html>2 ответа
Переменная name но ты использовал person поэтому он находит элемент с идентификатором person так как их не переменная person,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Challenge: Mad Libs</title>
</head>
<body>
<h1>Mad Libs</h1>
<ul>
<li>Noun: <input type="text" id="noun"></li>
<li>Adjective: <input type="text" id="adjective"></li>
<li>Someone's Name: <input type="text" id="person"></li>
</ul>
<button id="lib-button">Lib it!</button>
<p>Generated story:
<span id="story"></span>
</p>
<script>
var libButton = document.getElementById('lib-button');
var libIt = function() {
var storyDiv = document.getElementById("story");
var noun = document.getElementById("noun").value;
var adjective = document.getElementById("adjective").value;
var name = document.getElementById("person").value;
storyDiv.innerHTML = "I took my " + noun + " and " +
adjective + " it. "+ name + " didn't like it.";
};
libButton.addEventListener('click', libIt);
</script>
</body>
</html>