Question

我不确定自己在做什么错。我正在输入3个输入：名词，形容词和人。我不断得到： “生成的故事：我带猫去玩。 [object 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>

Answer 1

变量为name，但是您使用了person，因此它正在查找ID为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>

JavaScript中的疯狂库-Dom事件

1 个答案: