JS + localStorage как добавить поля?

Question

[BIGO23]

Добрый день. Есть такой скрипт
https://codepen.io/olayinkaos/pen/vxMdvd
Не могу разобратся как добавить еще input типа

<input id="date" type="date">
<input id="time" type="time">

И чтоб они добавлялись при нажатии кнопки

Answer 1

[Beliyadm]

Ну так по аналогии в функцию listItems добавьте новый элемент list += " ",

Comments

[BIGO23]

А можете чуть по подробнее

Сейчас у меня передается поле
<input id="todo-input" type="text" />
Я еще добавил еще 2 поля

<input id="date" type="date">
<input id="time" type="time">

функцию listItems я добавил но не работает

[Beliyadm]

BIGO23, listItems - что куда добавили?
В формируемую строку где перечень list += добавить по аналогии перед последней свои две с инпутами

function listItems() {
  var list = "";
  for (var i = 0; i < items.length; i++) {
    list += "<li class="+ (items[i].done ? "done" : "") +">";
    list += items[i].value + " ";
    list += "<small title='click me to mark as done' class='label' onclick='markAsDone("+ i +")'>"+ items[i].time +"</small> ";
    list += "<input id='date' type='date' /> ",
	list += "<input id='time' type='time' /> ",
	list += "<span class='label alert' onclick='deleteItem("+ i +")'>delete</span></li>";
    
  }
  document.querySelector("#list-items").innerHTML = list;
}

[BIGO23]

Я не правильно выразился по ходу. Мне нужны значения полей при заполнения вывести

[Beliyadm]

BIGO23, опять вопрос - при заполнении чего и куда вывести? Когда отправляем главную кнопку и получаем новую строку - там отобразить значения двух самостоятельных полей даты?

[BIGO23]

Beliyadm,
https://codepen.io/mishiko-hmaladze/pen/XWVaEzV

Тут отредактировал и вставил поля
человек заполняет 3 поля и при нажатии должно выводится все 3 поля

[Beliyadm]

// items array that contains all todo items
// JSON.parse is used to parse the stringified items from localStorage
// if localStorage is empty, make the items variable an empty array
var items = JSON.parse(localStorage.getItem('todo-list')) || [];


// function to add item to the items array
function addItem() {
  // get the value of the input box with querySelector
  var inputBox = document.querySelector('#todo-input');
  var item = inputBox.value
  
  var inputBoxDate = document.querySelector('#date');
  var itemDate = inputBoxDate.value
  
  var inputBoxTime = document.querySelector('#time');
  var itemTime = inputBoxTime.value
  
  // If input box is empty, return and alert the user
  // You can also do some more validation if here if you want
  if (item === "")
    return alert("You need to put in a number");

  // If input is valid, add item to items array
  items.push({
    value: item,
	valueDate: itemDate,
	valueTime: itemTime,
    time: (new Date()).toLocaleDateString("en-US")
  })
  
  // then convert to a string with JSON.stringify and save to localStorage
  localStorage.setItem('todo-list', JSON.stringify(items));
  
  // call function to list all items
  listItems();
  
  // clear input box
  inputBox.value = "";
}

// function to remove item from array with Array.splice()
// removes item, then saves new items array to localStorage
function deleteItem(index) {
  items.splice(index, 1);
  localStorage.setItem('todo-list', JSON.stringify(items))
  listItems();
}

function markAsDone(index) {
  items[index].done = !items[index].done;
  localStorage.setItem('todo-list', JSON.stringify(items));
  listItems();
}


// function that generates list of items and populates the html
function listItems() {
  var list = "";
  for (var i = 0; i < items.length; i++) {
    list += "<li class="+ (items[i].done ? "done" : "") +">";
    list += items[i].value + " ";
	list += items[i].valueDate + " ";
	list += items[i].valueTime + " ";
    list += "<small title='click me to mark as done' class='label' onclick='markAsDone("+ i +")'>"+ items[i].time +"</small> ";
    list += "<span class='label alert' onclick='deleteItem("+ i +")'>delete</span></li>";
    
  }
  document.querySelector("#list-items").innerHTML = list;
}

// function to run when page loads
(function() {
  listItems();
})();