Сортировать только элементы массива JavaScript, который имеет свойство CSS

Question

Я хочу создать неупорядоченный список. Порядок должен быть указан их идентификатором (который является номером. Наименьшее находится внизу.)

НО, если какой-то ли не имеет свойства CSS (текстовое оформление: сквозное в моем случае.) В любом случае они должны быть внизу.

Я пытаюсь сделать список дел, где отмеченные элементы находятся внизу, но когда вы снимете их, они возвращаются на место.

http://codepen.io/balazsorban44/pen/Gjzwbp

const inputArea = document.getElementById('todo-input'); 
const list = document.getElementById('tasks'); 
tasks = []; 
function loaded() { 
    inputArea.focus(); 
} 

function enter() { 
    if (event.keyCode == 13) { 
     addTask() 
    } 
} 

function refresh(array) { 
    var task = document.createElement('li'); 
    const checkBox = document.createElement('input'); 
    checkBox.setAttribute('type', 'checkbox'); 
    checkBox.setAttribute('onclick', 'toggleCheckBox()'); 
    task.appendChild(checkBox); 
    task.appendChild(document.createTextNode(array[array.length - 1].task)); 
    task.id = array[array.length - 1].timestamp.getTime() 
    list.appendChild(task); 
    return list; 
} 

function addTask() { 
    if (inputArea.value != '') { 
     tasks.push({ 
     timestamp: new Date(), 
       task: inputArea.value 
     }); 
     inputArea.value = ''; 
     inputArea.focus(); 
     refresh(tasks); 
     doneOrUndone(); 
     inputArea.placeholder = 'Click + or press Enter.' 
    } else { 
     inputArea.placeholder = 'Write something' 
    } 
} 

function doneOrUndone() { 
    var done = 0 
    const out = document.getElementById('out') 
    for (var i = 0; i < tasks.length; i++) { 
     if (document.getElementsByTagName('li')[i].style.textDecoration != '') { 
      done++ 
     } 
    } 
    out.value = parseInt(done) + '/' + parseInt(tasks.length) + ':' 
} 

function toggleCheckBox() { 
    const task = event.target.parentNode 
    if (task.style.textDecoration == '') { 
     task.style.textDecoration = 'line-through'; 
     list.appendChild(task) 
     doneOrUndone() 
    } else { 
     task.style.textDecoration = '' 
     for (var i = 0; i < tasks.length; i++) { 
      if (task.id < tasks[i].timestamp.getTime() && list.childNodes[0].style.textDecoration == 'line-through') { 
       if (task.id > list.childNodes[0].id) { 
       list.insertBefore(task, list.childNodes[0]); 
        break; 
       } 
      } else { 
       list.insertBefore(task, list.childNodes[i]); 
        break 
      } 
     } 
     doneOrUndone() 
    } 
} 

Answer 1

Я думаю, что реальная проблема заключается в том, что при установке style.textDecorationline-through к, фактическое свойство, которое устанавливается в textDecorationLine.

Ваша строка if (task.style.textDecoration == ''), следовательно, всегда верна.

Вы можете заменить textDecoration на textDecorationLine, и он должен работать.

http://codepen.io/anon/pen/bwzzkP

---

Основная причина этой проблемы, на мой взгляд, что вы используете атрибут, элемента style для мониторинга состояния . Я бы посоветовал либо:

1. магазин состояние в JavaScript, или
2. состояние Хранить в классе, или
3. состояние Хранить в обычае data- атрибут

Например:

const task = event.target.parentNode; 
const isDone = task.getAttribute("data-done"); 
task.style.textDecoration = !isDone ? 'line-through' : ''; 
task.setAttribute("data-done", !isDone);