Javascript- Creating To Do list not working

Question

I deleted the button part in my script but not even the first part of my function is working where I type in input box and suppose to be added to the

...I don't understand why. When I run the code without the buttons code which is titled " //BUTTON creation " I get no error but no item is being added to the list. So I have two problems Items aren't being added to my list and aren't displaying and also if I include the button part its saying an error "list.appendChild is not a function"

     <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>

Upvotes: 0

Views: 90

Answer 1

The problem is in the line:

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

list.appendChild(item);

The line var list = document.getElementsByClassName("ToDo"); will provide a collection, notice the plural name in the api. You need to access it using :

list[0].appendChild(item);

There are other problems too in the code but hopefully this gets you going!

Answer 2

There are a couple of issues in your code that need to be addressed to get it to work properly.

1) You are creating your image elements and then setting the variables to the src name of that image and not the image object itself. When you use that reference later on, you are only getting the image url and not the element itself. Change var remove = document.createElement('img').src = "images/remove-icon.png" to this:

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

2) As @Pankaj Shukla noted, inside the onclick function, getElementsByClassName returns an array, you will need to address the first item of this array to add your elements. Change var list = document.getElementsByClassName("ToDo") to this:

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

3) For your buttons, you are trying to creating them using: var remove = document.createElement('buttons'). This is invalid, buttons is an not the correct element name, its button. Additionally, you are re-declaring the variables remove and complete as button objects, so within the onclick function it reference these buttons, not the images you defined earlier. So when you assign the innerHTML to remove and complete, you are assigning the buttons innerHTML to itself. The solution is to change the image variables to something different.

4) Finally, also relating to the buttons, you are assigning the innnerHTML to an image object, that's incorrect. You can either insert the html text of the img directly, or append the image object as a child of the button, similar to how the button is a child of the div.

The updated code with all these changes looks like this:

//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);  
    }   
}