Generate HTML 2

by Cláudio Ventura

HTML

<div class="content" id="jshtml">

</div>

<!--<button onclick="setInterval(myFunction, 3000);">Try it</button>-->

<script>
window.addEventListener('load', function() {setInterval(myFunction, 3000);});
var x = true;
var e = document.getElementsByClassName("deviceStatus");
function myFunction() {
		if(x){
			//document.getElementById('192.168.2.1').innerHTML = "found you";
			for(i=0; i<e.length; i++){
				e[i].innerHTML = e[i] + " is online.";
				e[i].style.visibility = "visible";
			}
			//document.getElementsByClassName("deviceStatus").innerHTML = "found you";
			x=false;
		}else{
			//document.getElementById('192.168.2.1').innerHTML = "lost you";
			//document.getElementsByClassName("deviceStatus").innerHTML = "lost you";
			for(i=0; i<e.length; i++){
				//e[i].innerHTML = "lost you";
				e[i].style.visibility = "hidden";
			}
			x=true;
		}
		
}
</script>

CSS

#jshtml{
	
}

#li_deviceStatus{
    visibility: hidden;
}

JavaScript

var ipList=[];
var o1 = "192";
var o2 = "168";
var o3 = "2";
//Generate <p> fields for devices
var pFields = '<ul>';
var commonOctets = o1+'.'+o2+'.'+o3+'.';
for(i=1; i<=5; i++){
	var ip = commonOctets+i;
	var s = '<li style="visibility:hidden;" id="li_'+ip+'"><a href="http://'+ip+'" id="'+ip+'" class="deviceStatus">'+'</a></li>';
	pFields += s;
	ipList.push(ip);
}
pFields += '</ul>';
document.getElementById('jshtml').innerHTML = pFields;