javascript – How to toggle an Item from a To Do List


I am trying to display the styling component once the toggle button has been clicked, but the To-do Item does not have a line through it once clicked.

The function itself is setting the To-Do item from ‘false’ to ‘true’, so the function itself is working, just not the CSS styling.

Open to any advice.

 var todos = [];

// this is the toggle function

    function toggle(event){
      var position = event.currentTarget.id.split('-')[1];
      const individualToDoItem = JSON.parse(localStorage.getItem("ToDoList"));
      if (!todos[position].completed){
        todos[position].completed = true;
       
      } else {
        todos[position].completed = false;
      }
    }

// this is the display function of the to do list.


function displayToDos() {
        var UL = document.getElementById('UL')
        UL.innerHTML = '';

        const input = document.getElementById('add-input')
        var text = document.getElementsByTagName('p')
        const button = document.getElementById('add-item')


        for (i = 0; i < todos.length; i++) {
            var newLi = document.createElement('li');
            var newLabel = document.createElement('p');
            newLi.setAttribute('id', 'newLi')
            newLabel.setAttribute('class', 'label')
            
            newLabel.innerText = todos[i].toDoText;
            // newLi.innerText = todos[i].toDoText;
            newLi.style.fontWeight="600"


            var newButton = document.createElement('button')
            newButton.innerText="X";
            newButton.setAttribute("class", "remove")
            newButton.addEventListener('click', remove);
            newButton.id = 'remove-' + i;

            var toggleButton = document.createElement('input');
            toggleButton.setAttribute('type', 'checkbox');
            toggleButton.setAttribute('class', 'toggle')
            toggleButton.style.cursor="pointer"
            toggleButton.id = 'toggle-' + i;
            toggleButton.addEventListener('click', toggle);

            // var editButton = document.createElement('button');
            // editButton.setAttribute('class', 'editButton')
            // editButton.innerText="Edit";
            newLabel.addEventListener('click', edit);
            newLabel.id = 'edit-' + i; 
          
            if (todos[i].completed) { 
              newLabel.innerText =  todos[i].toDoText;
              newLabel.style.textDecoration = 'line-through';
              newLi.style.color="black";
              newLi.style.fontWeight="300"
              
              toggleButton.style.backgroundColor="#6d34c2";
              toggleButton.style.opacity = '0.7';
              toggleButton.style.display= 'inline';
              
              toggleButton.setAttribute('checked', 'checked');

            } else if(!todos[i].completed) {
              newLi.style.textDecoration = 'none';
              newLabel.innerText =  todos[i].toDoText;       
            }

            UL.appendChild(newLi);
            newLi.appendChild(toggleButton); 
            newLi.appendChild(newLabel);
            newLi.appendChild(newButton);  
            saveToLocalStorage();

       } 

              
        if(todos.length === 0) {
              UL.style.display = 'none';
            } else {
              UL.style.display = 'flex';
            }



      }



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here