Javascript-创建待办事项列表不起作用

Question

我删除了脚本中的按钮部分，但即使我的函数的第一部分在我在输入框中键入并假设添加到

中也不起作用......我不明白为什么。当我运行没有标题为“//BUTTONcreation”的按钮代码的代码时，我没有收到错误，但没有项目被添加到列表中。所以我有两个问题:项目没有添加到我的列表中并且没有显示，而且如果我包含按钮部分，它会显示错误“list.appendChild 不是函数”

     <input type="text" placeholder="Enter an Activity" id="textItem">   
     <img src="images/add-button.png" id="addButton">

<div id="container">

    <ul class="ToDo">
    <!--
        <li>
            This is an item
        <div id="buttons">
            <button ></button>
            <img src="images/remove-icon.png"id="remove">

            <button id="complete"></button>
            <img src="images/complete-icon.jpg" id="complete">

        </div>
        </li>
    !-->
    </ul>

</div>  



<script type="text/javascript">

    //Remove and complete icons
    var remove = document.createElement('img').src =
    "images/remove-icon.png";

    var complete = document.createElement('img').src = "images/complete-icon.jpg";

    //user clicks add button
    //if there is text in the item field we grab the item into var text
    document.getElementById("addButton").onclick = function()
    {
        //value item is the text entered by user
        var value = document.getElementById("textItem").value;
        //checks if there is a value typed
        if(value)
        {
            addItem(value);
        }

        //adds a new item to the ToDo list
        function addItem(text)
        {
            var list = document.getElementsByClassName("ToDo");

            //created a varibale called item that will create a list item everytime this function is called
            var item = document.createElement("li");
            //this will add to the innerText of the <li> text
            item.innerText = text; 

            //BUTTON creation
            var buttons = document.createElement('div');
            buttons.classList.add('buttons');

            var remove = document.createElement('buttons');
            buttons.classList.add('remove');
            remove.innerHTML = remove;

            var complete = document.createElement('buttons');
            buttons.classList.add('complete');
            complete.innerHTML = complete;

            buttons.appendChild(remove);
            buttons.appendChild(complete);
            list.appendChild(buttons);

            list.appendChild(item);

        }


    }


</script>

Answer 1

问题在于:

var list = document.getElementsByClassName("ToDo");

list.appendChild(item);

行 var list = document.getElementsByClassName("ToDo"); 将提供一个集合，请注意 api 中的复数名称。您需要使用以下方式访问它:

list[0].appendChild(item);

代码中还存在其他问题，但希望这能让您继续前进!