将用户输入添加到 li 元素

Question

已编辑

我目前正在努力弄清楚我的家庭作业（不，我不希望有人替我做）但我被困住了。我有一个简单的网站，用户在其中的文本框中键入内容，当他们单击提交按钮时，输入内容应显示在列表中。

我的教科书要求我编写函数 processInput() 来获取用户输入并将其放入列表中。我的问题是它是否要求我 "Set the content of the element with an id equal to the listItem to the value of the element with the id of inputbox." 我以为会是这个

document.getElementById("listItem").innerHTML = document.getElementById("inputBox");

但是我在这一行中收到一条错误消息："Uncaught TypeError: Cannot set property 'innerHTML' of null"

编辑： 谢谢大家的帮助。我已经删除了 listItem 周围的引号并修复了 [object HTMLInputElement] 问题，现在可以了。

已编辑的代码块：

      <div id="results">
      <ul>
         <li id="item1"></li> 
         <li id="item2"></li>
         <li id="item3"></li>
         <li id="item4"></li>
         <li id="item5"></li>
      </ul>
      <p id="resultsExpl"></p>
  </div>
  <form>
      <fieldset>
        <label for="inputBox" id="placeLabel">
          Type here, then click Submit:
        </label>
        <input type="text" id="inputBox" />
      </fieldset>
      <fieldset>
        <button type="button" id="button">Submit</button>
      </fieldset>
  </form>
</article>

<script>
    // Global variables
    var i = 1;
    var listItem = "";

    // function to process input
    function processInput()
    {
        if(i <= 5)
        {
            listItem = "item" + i;
            document.getElementById(listItem).innerHTML = document.getElementById("inputBox").value;
            document.getElementById("inputBox").value = "";
            if (i === 5)
            {
                document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
            }
            i += 1;
        }
    }

    // Backward compatable event listener for submit button
    var submitButton = document.getElementById("button");
    if(submitButton.addEventListener)
    {
        submitButton.addEventListener("click", processInput, false);
    }
    else if(submit.attachEvent)
    {
        submit.attachEvent("onclick", processInput);
    }
</script>

Answer 1

您的问题很简单——您向 getElementById 提供了字符串 "listItem"，但 ID listItem 不存在。

您要做的是提供您已经声明的变量：

listItem = "item" + i;

因为这看起来像 "item6"，等等

对于您的函数而言，这意味着——使用引号，因此您使用的是变量而不是字符串：

document.getElementById(listItem).innerHTML

Answer 2

您需要一个元素列表项。这就是您收到此错误的原因。

Answer 3

您必须从 listItem 中删除引号，因为您将 listItem 声明为变量。

document.getElementById(listItem).innerHTML = document.getElementById("inputBox");

Answer 4

您的 HTML 中没有 ID 为 "listItem" 的元素，因此

document.getElementById("listItem")

为空

Answer 5

行中

document.getElementById("listItem").innerHTML = document.getElementById("inputBox");

您实际上是在搜索 ID 为 "listItem" 的元素（您在搜索字符串！）

但是您在上面设置了变量 listItem，所以请改用它：

document.getElementById(listItem).innerHTML = document.getElementById("inputBox");

一旦你开始工作，你会注意到你正在将列表项的内容 (innerHTML) 设置为 ACTUAL ELEMENT（这就是 getElementById() 吐出的内容）。这实际上是不可能的，因此智能浏览器会告诉您该对象是什么……作为字符串：[object HTMLInputElement]。您的说明告诉您将列表项内容设置为该输入的值，而不是输入本身。

将用户输入添加到 li 元素

Add user input to a li element

html

javascript

user-input

list