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

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>
javascripthtml


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ali Mustafa

Related Questions