заполнить значение массива логическим значением для флажка

Question

Я начал изучать js и пытаюсь взять логическое значение в массиве и заполнить его флажками.

Это часть HTML:

<label style="font: bold 1.5em courier !important">
 <input type="checkbox" id="filterTodo" onclick="validate()">Hide completed
 </label>

Это мой массив:

let todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

И я установил глобальную переменную равной false:

let filterTodos = false

Если это значение не отмечено как его значение по умолчанию, оно должно показывать весь массив, если отмечено, оно должно показывать только те элементы в массиве, которые имеют значение complete: true

Итак, моя первая задача - показать все элементы в массиве, я показываю все текстовые значения каждого элемента и флажок, но я получаю значение undefined для флажков и меток.

Это код для отображения массива:

function addTodo(add_todo) {
  const p = document.createElement('p')
    p.textContent = add_todo.text
    document.querySelector('body').appendChild(p)

    let checkBox = document.createElement("input")
    let label = document.createElement("label")
        checkBox.type = "checkbox"
        checkBox.value = addTodo.completed
        document.querySelector('body').appendChild(checkBox)
        document.querySelector('body').appendChild(label)
        label.appendChild(document.createTextNode(todos.completed))

}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function (todo) {
    addTodo(todo);  
  }) 
}

showTodos(todos);

Я думаю, что в моей функции showTodos должно быть условие if, где, если установлен флажок с идентификатором filterTodo, тогда он должен перебирать массив и показывать только те элементы, для которых завершенное значение истинно.

Я пытался поиграть со следующим кодом, но только тестируя с console.log, я получаю только ложные значения независимо от того, установлен флажок или нет. Это та часть кода:

function validate() {
    let isChecked = false;
    if (document.getElementById(('filterTodo').checked)) {
      isChecked = true;
      console.log(isChecked);
    } else {
      isChecked = false;
      console.log(isChecked);
    }
  }

Итак, главная проблема в том, что я не могу показать правильное значение для флажков, если они выполнены или нет, все они не определены.

Другая проблема в том, что я не могу написать код, если я поставил флажок, чтобы отфильтровать массив и показать только все задачи или только те, которые выполнены

Answer 1

В вашем коде есть небольшая логическая ошибка:

document.getElementById(('filterTodo').checked))

Это в основном означает: найти элемент с идентификатором значения свойства selected строки 'filterTodo'.Поскольку строки не имеют свойства selected, элемент не найден, а для isChecked никогда не устанавливается значение true.

Попробуйте сначала получить элемент, а затем запросить проверенный атрибут:

document.getElementById( 'filterTodo' ).checked;

Тогда я получаю true / false, в зависимости от того, установлен флажок или нет:

var todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}];
	
showTodos(todos);

function addTodo(add_todo) {
  var p = document.createElement('p')
  p.textContent = add_todo.text
  document.querySelector('body').appendChild(p)
  var checkBox = document.createElement("input")
  var label = document.createElement("label")
  checkBox.type = "checkbox"
  checkBox.value = addTodo.completed
  document.querySelector('body').appendChild(checkBox)
  document.querySelector('body').appendChild(label)
  label.appendChild(document.createTextNode(add_todo.completed))
}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function (todo) {
  addTodo(todo);  
  }) 
}

function validate() {
  let isChecked = false;
  if ( document.getElementById( 'filterTodo' ).checked ) {
    isChecked = true;
    console.log(isChecked);
  } else {
    isChecked = false;
    console.log(isChecked);
  }
}

	<label style="font: bold 1.5em courier !important">
		<input type="checkbox" id="filterTodo" onchange="validate()">Hide completed
	</label>

Теперь вам нужно только добавить логику .filter () к массиву задач, чтобы вы получили новый массив только с незавершенными задачами, а затем очиститетело ранее отрисованных задач и, наконец, перерисовка массива, созданного фильтром.

РЕДАКТИРОВАНИЕ:

Неопределенные значения внутри меток вызваны следующими причинами:

label.appendChild(document.createTextNode(todos.completed))

задачиэто весь массив, а не элемент, поэтому вам нужно:

label.appendChild(document.createTextNode(add_todo.completed))

, если вам нужно, чтобы значение true / false было на этикетке