Mad Libs в JavaScript - Dom Event - PullRequest
Новая
       38

Mad Libs в JavaScript - Dom Event

0 голосов
/ 16 января 2019

Я не уверен, что я делаю неправильно. Я беру 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>

1 Ответ

0 голосов
/ 16 января 2019

Переменная 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>
...