向li元素添加用户输入

Question

已编辑

我目前正在努力解决我的家庭作业(不，我不想有人帮我做(，但我被卡住了。我有一个简单的网站，用户在文本框中键入一些内容，当他们单击提交按钮时，输入应该显示在列表中。

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

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

但我在这一行遇到了一个错误："Uncaught 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>

Answer 1

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

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

Answer 2

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

你想做的是提供你已经声明的变量：

listItem = "item" + i;

因为这看起来像"item6"等

对您的函数来说，这意味着——取引号，所以您使用的是变量而不是字符串：

document.getElementById(listItem).innerHTML

Answer 3

您需要一个元素listItem。这就是你出现这个错误的原因。

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]。您的指令告诉您将列表项内容设置为该输入的VALUE，而不是输入本身。