Блог

Я пытаюсь добавить кнопки «редактировать» и «удалить» в элемент списка после нажатия на него. Я добавил 2 кнопки в элемент списка и установил для их отображения значение none в классах btnedit и btndelete:

 function Add(){
    let li = document.createElement('li');
    let a = document.createElement('a');
    let button1 = document.createElement('button');
    let button2 = document.createElement('button');
    button1.innerHTML = "Edit";
    button2.innerHTML = "Delete";
    button1.setAttribute('class','BtnEdit');
    button2.setAttribute('class','BtnDelete');
    let input = document.getElementById('AddText').value;
    if (input.length < 3){
        alert('Must be longer than 3');
    }
    else if(input.length > 255){
        alert('Cant be longer than 255');
    }
    else {
        if (checkDate()!=null) {
            let date = checkDate();
            let t = document.createTextNode(`${input}   ${date}`);
            let test = new storage1(input,date);
            store(test);
            li.appendChild(a);
            a.appendChild(t);
            document.getElementById("myList").appendChild(li).appendChild(a);
            li.appendChild(button1);
            li.appendChild(button2);
        }
    }
  

В этой функции я меняю их цвет фона при нажатии на элемент списка:

     let list = document.querySelector('ul');
    list.addEventListener('click', function(ev) {
        if (ev.target.tagName === 'LI') {
            ev.target.classList.toggle('checked');


        }
    }, false);
  

но я понятия не имею, как теперь отображать кнопки

Измените отображение:

 button1.style.display = "inline";
  

или удалите класс:

 button1.classList.remove("BtnEdit");