Javascript 将用户输入添加到li元素

已编辑

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

我的教科书要求我生成函数processInput（），它接受用户输入并将其放入列表中。我的问题是，如果它要求我“将id等于listItem的元素的内容设置为id为inputbox的元素的值”

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

但是我在这一行中得到一个错误，它是：“uncaughttypeerror:无法将属性'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>

在此处键入，然后单击提交：
提交
//全局变量
var i=1；
var listItem=“”；
//处理输入的函数
函数processInput（）
{
如果（i这里的问题很简单——您向
getElementById
提供了一个字符串
“listItem”
，但是ID
listItem
不存在

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

listItem = "item" + i;

因为这看起来像是
“item6”
，等等

函数的所有含义是--取引号，因此使用变量而不是字符串：

document.getElementById(listItem).innerHTML

您需要元素listItem。这就是出现此错误的原因。
您必须从listItem中删除引号，因为您已将listItem声明为变量

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

您的HTML中没有id为“listItem”的元素，因此

行中为空

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

您实际上是在搜索id为“
”listItem“
”的元素（您在搜索字符串！）

但是您在上面设置了变量
listItem
，因此请改用该变量：

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

一旦你开始工作，你会注意到你正在将列表项的内容（
innerHTML
）设置为实际的元素（这就是
getElementById（）
所吐出的内容）。这实际上是不可能的，所以智能浏览器会以字符串的形式告诉你该对象是什么：
[object HTMLInputElement]
。您的说明告诉您将列表项内容设置为该输入的值，而不是输入本身。
我停止阅读，因为没有id为listItem的元素。您的代码是否完整？很好！我想我们中的许多人都认为这是常见的“未找到元素”问题。
document.getElementById(listItem).innerHTML = document.getElementById("inputBox");