Prepend Output To DIV With Javascript And A Couple Other Questions

I am working on form. Now the form it's self works great, no issues with it. But I am trying to implement a history log of previous results. I have been able to get it working in a

Solution 1:

To answer your first question, you can use prepend() to attach contents to the beginning of the element.

function prepend() {
  let div = document.createElement('div');
  div.innerHTML = new Date().getTime();
  document.getElementById('your_id').prepend(div);
}

<div id="your_id"></div>
<button onclick="prepend()">Do Prepend</button>

Solution 2:

To answer your second question with timeclock, you had a typo by using timeDiv.setAtt... as timeDiv is not declared. Please find the corrected code

var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November',
  'December'
];

function showTime() {
  function twoDigit(n) {
    return ('0' + n).slice(-2);
  }

  function iso8601(date) {
    return date.getFullYear() +
      '-' + twoDigit(1 + date.getMonth()) +
      '-' + twoDigit(date.getDate()) +
      'T' + twoDigit(date.getHours()) +
      ':' + twoDigit(date.getMinutes());
  }

  function en_US(date) {
    var h = date.getHours() % 12;
    return MONTH_NAME[date.getMonth()] +
      ' ' + date.getDate() +
      ', ' + date.getFullYear() +
      '<br />' + (h == 0 ? 12 : h) +
      ':' + twoDigit(date.getMinutes()) +
      ' ' + (date.getHours() < 12 ? 'am' : 'pm');
  }

  var timeEl = document.getElementById('time');
  if (timeEl !== null) {
    var now = new Date();
    var div = document.createElement('div');
    div.innerHTML = en_US(now);
    div.setAttribute('datetime', iso8601(now));
    timeEl.append(div);
  }
};
setInterval(showTime, 1000);

<div id="time"></div>

Solution 3:

To answer your third question, please try the code below

(function() {
  let elementsArray = document.querySelectorAll(".close");

  elementsArray.forEach(function(elem) {
    elem.addEventListener("click", function() {
      this.classList.add('hide');
    });
  });
})();

.close {
  background: #ccc;
  padding: 1em;
  margin: 1em;
}

.hide {
  display: none;
}

<div class="close">
  Text 1
</div>

<div class="close">
  Text 2
</div>

<div class="close">
  Text 3
</div>

Solution 4:

Answer to fist question

SecondDIVOutput.innerHTML+=   "<ul><li><time id='time'></time><br /><br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>";

Changed to

SecondDIVOutput.innerHTML =   "<ul><li><time id='time'></time><br /> <br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>" + SecondDIVOutput.innerHTML;

Note the += been changed to = and +SecondDIVOutput.innerHTML; added to the end. Also be aware this method is creating a new <ul> per item inserted. Correct solution at bottom.

Second Question

The time stamp issue is due to var timeEl = document.getElementById('time'); returning the first matching element in the DOM and you have multiple id="time" in DOM.

Last question

Each time you use SecondDIVOutput.innerHTML += ... all existing events within the SecondDIVOutput elements are lost. After calling convertOutput() you should run that addEventListener() loop immediately after it

Now the correct way of adding items to the list:

HTML:

<p>History log:</p><br><div style="white-space:pre-wrap"><ul id="outputListItem"></ul></div> 

JS:

function convertOutput(){
   var output = document.getElementById("output").value;
   var li = document.createElement('li');
   var currentTime = getCurrentTime();

   li.innerHTML = "<time id='time'>" + currentTime + "</time><br /> <br />"+ output +"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

function getCurrentTime() {
    var today = new Date();
    var HHMMSS = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return HHMMSS;
}

You have to create a function to get the currentTime() bear in mind <time id='time'> needs to be unique if you want to dynamically change this as a timer.

See https://jsfiddle.net/h0xucobp/ for working example