I wrote a javascript that increases a set of numbers every second, where every increased set writes on a new line separated by a horizontal rule. E.g;
20220215155
20220215156
20220215157
20220215158 etc...
var i = 20220215155;
function increment(){
i++;
document.getElementById('period').innerHTML += i + "<br />" + "<hr />" ;
}
setInterval('increment()', 1000);
But I want every current set of the numbers to always be in the first line, whereby a previously increased set goes below the currently increased set... E.g;
20220215159
20220215158
20220215157
20220215156
20220215155
Please how do I go about this?
Like this?
<button id="start">Start Incrementing</button>
<button id="stop">Stop Incrementing</button>
<div id="main"></div>
<script>
const main = document.querySelector('#main');
const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');
let i = 0;
let interval = null;
const createElem = () => {
const div = document.createElement('p');
div.className = 'inc-elem';
const h1 = document.createElement('h1');
h1.innerText = i;
const hr = document.createElement('hr');
div.appendChild(h1);
div.appendChild(hr);
return div;
};
window.addEventListener('DOMContentLoaded', () => {
const startingDiv = createElem();
main.prepend(startingDiv);
});
const increment = () => {
i++;
const newDiv = createElem();
main.prepend(newDiv);
};
startBtn.addEventListener('click', () => (interval = setInterval(increment, 1000)));
stopBtn.addEventListener('click', () => clearInterval(interval));
</script>