Dynamically create a html list that update

Question

I'm trying to dynamically create a html list that update when new information arrives. Here is my code :

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { li.innerHTML = last[w]; },2000); } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

Doing like above, I get undefined.

If I do it like below, the code works but each li do not update every time Math.random generates a new number.:

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000) createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); li.innerHTML = last[w]; } },3500) } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

So my question is : how can I get the list to display and update every time a new number is generated ?

Thanks a lot.

Answer 1

Here is a working example using only pur javascript :

 /** * Update The HTML * * @param {Array} last - ensure the array exist by passing it as an argument */ function updateHtml(last) { const ul = document.querySelector('#toUpdate'); // Empty existing li node ul.innerHTML = '' for (let i = 0; i < last.length; i++) { // create and append li elements const li = document.createElement('li') li.innerHTML = last[i] ul.appendChild(li); } } setInterval(function() { // call with random stuff updateHtml([ Math.random(), Math.random(), Math.random(), Math.random(), Math.random() ]) }, 2000) // first call with strings updateHtml([ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy" ]); 

 #listwrapper { margin-top: 2%; width: 100%; } li { display: inline; float: left; padding: 10px; } 

 <div id="main"> <ul id="toUpdate"> </ul> </div> 

There is many things to say about DOM Update but most of all what I've done is to exctract the update function to specialize it so updateHtml manipulate the DOM according to the 'last' argument.

Please note that this is a one way data binding. You can do more by using more complex structures and patterns like Observable.

Hope that help

Answer 2

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { list = ul.childNodes; for (var i = 0; i < list.length; i++) { list[i].innerHTML = last[i]; } },2000); } 

 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

This works. Notes:

1. Create variables without keywords let or var makes them global which is a bad thing. Variables should be accessible only where its supposed to. See this post.
2. The above code will fail if the number of elements in the last list is less then the number of li elements appended to ul .