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.

functionprepend() {
  let div = document.createElement('div');
  div.innerHTML = newDate().getTime();
  document.getElementById('your_id').prepend(div);
}

<divid="your_id"></div><buttononclick="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

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

functionshowTime() {
  functiontwoDigit(n) {
    return ('0' + n).slice(-2);
  }

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

  functionen_US(date) {
    var h = date.getHours() % 12;
    returnMONTH_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 = newDate();
    var div = document.createElement('div');
    div.innerHTML = en_US(now);
    div.setAttribute('datetime', iso8601(now));
    timeEl.append(div);
  }
};
setInterval(showTime, 1000);

<divid="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;
}

<divclass="close">
  Text 1
</div><divclass="close">
  Text 2
</div><divclass="close">
  Text 3
</div>

Solution 4:

Answer to fist question

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

Changed to

SecondDIVOutput.innerHTML =   "<ul><li><timeid='time'></time><br /><br />"+ output +"<br /><br /><spanclass='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><divstyle="white-space:pre-wrap"><ulid="outputListItem"></ul></div>

JS:

functionconvertOutput(){
   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);
}

functiongetCurrentTime() {
    var today = newDate();
    varHHMMSS = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    returnHHMMSS;
}

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