Помогите исправить баг в таск менеджере

07 января 2022, 01:20

У меня есть код:

function instruments(){ 
    triTochki = document.getElementsByClassName('tri-tochki'); 
    for(i=0;i<triTochki.length;i++){ 
        let a = triTochki[i]; 
        a.addEventListener('click', function(e){ 
            e.target.nextElementSibling.classList.toggle('displayBlock'); 
        }) 
    } 
} 
function showTasks(arr){ 
    let a = document.getElementById('css') 
    if(a != null) a.remove(); 
    let s = document.createElement('div') 
    s.id = 'css'; 
 
    for(i=0; i<arr.length; i++){ 
        let taske = document.createElement('div') 
        taske.classList.add('task') 
 
        let tit = document.createElement('div'); 
        tit.classList.add('title'); 
        tit.innerText = arr[i].title; 
        taske.appendChild(tit); 
 
        let descr = document.createElement('div'); 
        descr.classList.add('descr'); 
        descr.innerText = arr[i].desc 
        taske.appendChild(descr); 
 
        let bott = document.createElement('div'); 
        bott.classList.add('bott') 
        taske.appendChild(bott); 
 
        let prior = document.createElement('div'); 
        prior.classList.add('prior'); 
        prior.innerText = arr[i].prio; 
        bott.appendChild(prior); 
 
        let menu = document.createElement('div'); 
        menu.classList.add('menu'); 
 
        let triTochki = document.createElement('div') 
        triTochki.classList.add('tri-tochki'); 
        triTochki.innerText = '...' 
        triTochki.dataset.index = arr[i].index; 
        bott.appendChild(triTochki); 
 
        let menuVipad = document.createElement('div'); 
        menuVipad.classList.add('menu-vipad'); 
        menu.appendChild(menuVipad) 
 
        let arrowUp = document.createElement('div') 
        arrowUp.classList.add('arrow-up'); 
        menuVipad.appendChild(arrowUp); 
 
        done = document.createElement('div'); 
        done.classList.add('done'); 
        done.dataset.index = arr[i].index; 
        menuVipad.appendChild(done); 
        done.innerText = 'done' 
 
        edit = document.createElement('div') 
        edit.dataset.index = arr[i].index; 
        edit.classList.add('edit'); 
        menuVipad.appendChild(edit); 
        edit.innerText = 'edit' 
 
        del = document.createElement('div') 
        del.dataset.index = arr[i].index; 
        del.classList.add('del'); 
        menuVipad.appendChild(del); 
 
    bott.appendChild(menu); 
    s.appendChild(taske); 
    } 
    tasks.appendChild(s); 
    instruments() 
}

.menu-vipad{ 
    width: 50px; 
    height: 58px; 
    border: 2px solid black; 
    text-align: center; 
    background-color: #fff; 
    position: relative; 
    display: none; 
    margin-top: 8px; 
}

<div class="task"> 
    <div class="title">Lorem Ipsum</div> 
    <div class="descr">Lorem ipsum dolor sit amet</div> 
 
    <div class="bott"> 
    <div class="prior">easy</div> 
    <div class="menu"> 
        <div class="tri-tochki">...</div> 
        <div class="menu-vipad"> 
            <div class="arrow-up"></div> 
            <div class="done">done</div> 
            <div class="edit">edit</div> 
            <div class="del">delete</div> 
        </div> 
    </div> 
    </div> 
    </div>

Когда нажимаеш на triTochki меню которое ищет строка e.target.nextElementSibling.classList.toggle('displayBlock'); должно появиться. Помогите пожалуйста я уже 5 часов пытаюсь исправить.

Я забыл сказать что он просто не находит nextElement

Answer 1

Если это все стили которые вы скинули. то вот - добавьте. Для итерации коллекции используйте Array.from(document.getElementsByClassName( 'tri-tochki'))

nextElement - это у вас class menu. В итоге меняете class menu В этом class menu у вас class menu-vipad - который вы скрываете в стилях.

showTasks([ 
			{ index: 0, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
			{ index: 1, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
			{ index: 2, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
			{ index: 3, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
			{ index: 4, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
			{ index: 5, descr: "Some descr", prio: "Some prio", title: "Some title" }, 
		]); 
 
		function instruments() { 
		  let triTochki = Array.from(document.getElementsByClassName( 
		    'tri-tochki')); 
		  for (let i = 0; i < triTochki.length; i++) { 
		    let a = triTochki[i]; 
		    a.addEventListener('click', 
		      function(e) { 
		        e.target.nextElementSibling.classList 
		          .toggle('displayBlock'); 
	      	}); 
		  } 
		} 
 
		function showTasks(arr) { 
		  let a = document.getElementById('css'); 
		  if (a !== null) a.remove(); 
		  let s = document.createElement('div'); 
		  s.id = 'css'; 
		  for (let i = 0; i < arr.length; i++) { 
		    let taske = document.createElement( 
		      'div'); 
		    taske.classList.add('task'); 
		    let tit = document.createElement( 
		      'div'); 
		    tit.classList.add('title'); 
		    tit.innerText = arr[i].title; 
		    taske.appendChild(tit); 
		    let descr = document.createElement( 
		      'div'); 
		    descr.classList.add('descr'); 
		    descr.innerText = arr[i].descr; 
		    taske.appendChild(descr); 
		    let bott = document.createElement( 
		      'div'); 
		    bott.classList.add('bott'); 
		    taske.appendChild(bott); 
		    let prior = document.createElement( 
		      'div'); 
		    prior.classList.add('prior'); 
		    prior.innerText = arr[i].prio; 
		    bott.appendChild(prior); 
		    let menu = document.createElement( 
		      'div'); 
		    menu.classList.add('menu'); 
		    let triTochki = document.createElement( 
		      'div'); 
		    triTochki.classList.add( 
		      'tri-tochki'); 
		    triTochki.innerText = '...'; 
		    triTochki.dataset.index = arr[i].index; 
		    bott.appendChild(triTochki); 
		    let menuVipad = document.createElement( 
		      'div'); 
		    menuVipad.classList.add( 
		      'menu-vipad'); 
		    menu.appendChild(menuVipad); 
		    let arrowUp = document.createElement( 
		      'div'); 
		    arrowUp.classList.add('arrow-up'); 
		    menuVipad.appendChild(arrowUp); 
		    let done = document.createElement('div'); 
		    done.classList.add('done'); 
		    done.dataset.index = arr[i].index; 
		    menuVipad.appendChild(done); 
		    done.innerText = 'done'; 
		    let edit = document.createElement('div'); 
		    edit.dataset.index = arr[i].index; 
		    edit.classList.add('edit'); 
		    menuVipad.appendChild(edit); 
		    edit.innerText = 'edit'; 
		    let del = document.createElement('div'); 
		    del.dataset.index = arr[i].index; 
		    del.classList.add('del'); 
		    menuVipad.appendChild(del); 
		    bott.appendChild(menu); 
		    s.appendChild(taske); 
		  } 
			document.getElementById("tasks").appendChild(s); 
			instruments(); 
		}

.menu-vipad{ 
    width: 50px; 
    height: 58px; 
    border: 2px solid black; 
    text-align: center; 
    background-color: #fff; 
    position: relative; 
    margin-top: 8px; 
} 
 
.menu { 
  display: none; 
} 
 
.displayBlock { 
  display: block; 
}