How to make date appear every time a button is clicked?-CodePudding

I created a list, each time someone clicks on the "Submit" button I want the date to appear on each task that has been created.

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var addItem = document.createElement("li")
  addItem.appendChild(text)
  document.getElementById("todoList").appendChild(addItem)

  var item = document.getElementById("description").value
  var text = document.createTextNode(item)
  var addItem = document.createElement("p")
  addItem.appendChild(text)
  document.getElementById("todoList").appendChild(addItem)
  document.getElementById("todoForm").reset();

  var date = new Date();
  document.getElementById("date").innerHTML = date;
}

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="Input new note..">
  <input type="text" id="description" placeholder="Input description..">
  <button type="button" id="submit" onclick="todoList()">Submit</button>
  <button type="button" id="clear" onclick="clearButton()">Clear</button>
  <button type="button" id="hide" onclick="hideButton()">Show/Hide</button>
</form>
<ol id="todoList">
</ol>

<p id="date"></p>

CodePudding user response：

You use this method

function todoList() {
  let todoList = document.getElementById("todoList")
  let title = document.getElementById("todoInput").value
  let desc = document.getElementById("description").value
  let date = new Date();
  
  todoList.innerHTML  = `<li>${title} , ${desc}, ${date}</li>`
  
}

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="Input new note..">
  <input type="text" id="description" placeholder="Input description..">
  <button type="button" id="submit" onclick="todoList()">Submit</button>
  <button type="button" id="clear" onclick="clearButton()">Clear</button>
  <button type="button" id="hide" onclick="hideButton()">Show/Hide</button>
</form>
<ol id="todoList">
</ol>

<p id="date"></p>

CodePudding user response：

You want to make the date appear but didn't specify where. Assuming you want it next to the task, I have used innerHTML to add the date string to the input. But beware, innerHTML overwrites the previous value.

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var addItem = document.createElement("li")
  addItem.appendChild(text)
  document.getElementById("todoList").appendChild(addItem)
  var date = new Date();
  addItem.innerHTML  = `&nbsp;&nbsp;${date}`;

  var item = document.getElementById("description").value
  var text = document.createTextNode(item)
  var addItem = document.createElement("p")
  addItem.appendChild(text)
  document.getElementById("todoList").appendChild(addItem)
  document.getElementById("todoForm").reset();

  
}

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="Input new note..">
  <input type="text" id="description" placeholder="Input description..">
  <button type="button" id="submit" onclick="todoList()">Submit</button>
  <button type="button" id="clear" onclick="clearButton()">Clear</button>
  <button type="button" id="hide" onclick="hideButton()">Show/Hide</button>
</form>
<ol id="todoList">
</ol>

<p id="date"></p>