Question

我在我的脚本中删除了按钮部分，但即使我的功能的第一部分工作在输入框中输入的地方也没有，并且假设要添加到

...我没有＆＃39;明白为什么。当我运行没有按钮代码的代码时，标题为＆＃34; //按钮创建＆＃34;我没有收到错误，但没有项目添加到列表中。所以我有两个问题项目没有被添加到我的列表中并且没有显示，如果我包含按钮部分，则表示错误＆＃34; list.appendChild不是函数＆＃34; < p>

     <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

您的代码中存在一些问题需要解决才能使其正常运行。

1）您正在创建图像元素，然后将变量设置为该图像的src名称，而不是图像对象本身。稍后使用该引用时，您只获取图像URL而不是元素本身。将var remove = document.createElement('img').src = "images/remove-icon.png"更改为：

  var removeImg = document.createElement('img')
  removeImg.src = "images/remove-icon.png";

2）正如 @Pankaj Shukla 所指出的那样，在onclick函数中，getElementsByClassName返回一个数组，您将需要解决第一个问题。要添加元素的数组项。将var list = document.getElementsByClassName("ToDo")更改为：

var list = document.getElementsByClassName("ToDo")[0];

3）对于您的按钮，您尝试使用以下代码创建它们：var remove = document.createElement('buttons')。这是无效的，buttons不是正确的元素名称，button。此外，您将变量remove和complete重新声明为按钮对象，因此在onclick函数中它引用这些按钮，而不是您之前定义的图像。因此，当您将innerHTML分配给remove和complete时，您要将按钮innerHTML分配给自己。解决方案是将图像变量更改为不同的值。

4）最后，还与按钮有关，您将innnerHTML分配给图像对象，这是不正确的。您可以直接插入img的html文本，也可以将图片对象附加为button的子项，类似于button是div的子项的方式}。

包含所有这些更改的更新代码如下所示：

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

var completeImg = document.createElement('img');
completeImg.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")[0];

        //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('button');
        remove.classList.add('remove');
        remove.appendChild(removeImg);

        var complete = document.createElement('button');
        complete.classList.add('complete');
        complete.appendChild(completeImg);

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

        list.appendChild(item);  
    }   
}

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

1 个答案: