Блог

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

НО если у определенного li нет свойства 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() amp;amp; 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()
    }
}
  

Я думаю, что реальная проблема заключается в том, что при установке style.textDecoration на line-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);