已编辑

我目前正在尝试弄清楚我的家庭作业（不，我不想让别人帮我做），但我陷入了困境。我有一个简单的网站，用户在文本框中输入一些内容，当他们单击提交按钮时，输入内容应显示在列表中。

我的教科书要求我制作 processInput() 函数，该函数接受用户输入并将其放入列表中。我的问题是它要求我“将 id 等于 listItem 的元素的内容设置为 id 为 inputbox 的元素的值。”我以为会是这个

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

但我在这行上收到一条错误消息：“未捕获 TypeError：无法将属性‘innerHTML’设置为 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>