Блог

я выхожу var liElement = document.createElement('li'); из функции addTodo() , чтобы заставить эту функцию работать

  function removeTodo(){
    liElement.remove()
};  
 

но теперь у меня другая проблема: я не могу добавить более одного todo (li)

 const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
var liElement = document.createElement('li');
let placeholderValue = '';
 

// Этот код предназначен для четкого значения заполнителя

 input.addEventListener('focus' , () => {
    placeholderValue = input.placeholder;
    input.placeholder = '';
});

input.addEventListener('blur' , ()=> {
    input.placeholder = placeholderValue;
});
 

// эта функция предназначена для добавления в список дел

 function addTodo(){
    todoList.appendChild(ulElement)
    ulElement.appendChild(liElement);
    liElement.classList.add('liElement')
    liElement.innerHTML = input.value;
};
addBtn.addEventListener('click' , addTodo)
// this function is for remove todo from the list
function removeTodo(){
    liElement.remove()
};
liElement.addEventListener('contextmenu' , (e) => {
    e.preventDefault()
    removeTodo()
});
 

Вы не используете createTextNode , например :

  var t = document.createTextNode(input.value);
   liElement.appendChild(t);
 

… и вы создали очень сложную структуру. Сделайте это проще для себя.

И, наконец,

 const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
 

зачем использовать для создания элементов? они вам не нужны. Вы можете создать их в HTML-файле.