У меня проблемы с отображением даты рядом с введенным элементом todo. Что не так с функцией changeDate ()?

1

Введено todo, но дата не отображается. Я использую любую неправильную команду? При вводе данных дата должна отображаться слева от todo, чуть ниже области ввода.

var list = document.getElementById('demo');
var list2 = document.getElementsByTagName('todos');

function store(ele) {
  if (event.keyCode == 13) {
    changeText();
  }
}

function changeText() {
  var data = document.getElementById('todo').value;
  if (data != '') {
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(data));
    list.appendChild(entry);
    changeDate();
  }
}

function changeDate() {
  var d = new Date();
  var dates = document.createElement("div");
  dates.className = "myClass";
  dates.innerHTML = document.createTextNode(d.toDateString());
  list2.innerHTML = dates;
}
<div class="container">
  <h1>
    Your todos
  </h1>

  <input type="text" id="todo" placeholder="Add a new todo and hit enter" onkeydown="store(this)">
  <div class="todos">
    <ul id="demo"></ul>
  </div>
</div>
  • 0
    Таким образом, для каждого элемента вы хотели бы получить дату, когда он был добавлен?
  • 0
    Если у вас другой вопрос, задайте новый вопрос ...
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Прежде всего у вашего JS есть проблема. list2 является HTMLCollection и там нет .innerHTML для этого. Вам необходимо использовать:

list2[0].innerHTML

Тебе даже это не нужно. Проблема даты связана с тем, что объект даты неправильно установлен/вставлен.

var list = document.getElementById('demo');
var list2 = document.getElementsByTagName('todos');

function store(ele) {
  if (event.keyCode == 13) {
    changeText();
  }
}

function changeText() {
  var data = document.getElementById('todo').value;
  if (data != '') {
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(data));
    list.appendChild(entry);
    changeDate(list);
  }
}

function changeDate(which) {
  var d = new Date();
  which.innerHTML += d.toDateString();
}
<div class="container">
  <h1>
    Your todos
  </h1>

  <input type="text" id="todo" placeholder="Add a new todo and hit enter" onkeydown="store(this)">
  <div class="todos">
    <ul id="demo"></ul>
  </div>
</div>

предварительный просмотр

Изображение 174551

Поделиться
  • 0
    Я хочу, чтобы дата была показана слева от задачи, в той же строке
  • 0
    @aQwusjargon Вместо += используйте: which.innerHTML = d.toDateString() + which.innerHTML;
Показать ещё 6 комментариев
0

вместо этого:

function changeText() {
  var data = document.getElementById('todo').value;
  if (data != '') {
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(data));
    list.appendChild(entry);
    changeDate(list);
  }
}

попробуй это:

function changeText() {
  var data = document.getElementById('todo').value;
  if (data != '') {
    var entry = document.createElement('li');
    changeDate(list); //call this before appending data
    entry.appendChild(document.createTextNode(data));
    list.appendChild(entry);

  }
}

и CSS:

li{
    display: inline-block;
}
Поделиться
  • 0
    при смещении позиции changeDate (list) даты записываются одна за другой, после чего записываются задачи, они тоже одна за другой, в одной строке. Сохраняя позицию changeDate (list) одинаковой, задачи с соответствующими датами пишутся в одной строке, как изменить строку?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню